Tips for creating curved Extjs area and line charts with a gentle radius to soften the sharp curves

I have been working on a mixed charts component for Extjs, and I noticed that the curves appear too sharp. I am unable to find a configuration option to add radius to the curves. If anyone has experience with this issue, could you please share a method to make the curves smoother? Below is the code snippet:

Ext.define('Ext.vcops.rootCause.RootCauseScoreChart', {

    extend : 'Ext.chart.Chart',

    initMembers : function() {
        // Code for data store creation and axes setup
    },

    initComponent : function() {
        this.initMembers();
        var config = {
            insetPadding: 0,
            legend: {
                position: 'right',
                boxStroke : 'transparent',
                boxFill: 'transparent'
            },
            listeners: {
                select: {
                    fn: function(me, selection) {
                        //TODO zoom logic here
                    }
                }
            }
        };

        Ext.apply(this, Ext.apply(config, this.initialConfig));
        Ext.vcops.rootCause.RootCauseScoreChart.superclass.initComponent.apply(this, arguments);
    }
});

Answer №1

I prefer using a line chart with fill=true as it gives the same effect as an area chart but with curved areas.

Ext.application({
name: 'Fiddle',
launch: function() {
    Ext.application({
        name: 'PanelHeaderItems',

        launch: function() {

            var graphStore = Ext.create('Ext.data.Store', {
                fields: ['kg', 'ha'],
                data: [{
                    "kg": "0.23",
                    "ha": "90"
                }, {
                    "kg": "0.4",
                    "ha": "20"
                }, {
                    "kg": "0.6",
                    "ha": "70"
                }, {
                    "kg": "0.8",
                    "ha": "56"
                }, {
                    "kg": "0.95",
                    "ha": "100"
                }]
            });

            wizardStep3Chart = new Ext.chart.CartesianChart({
                width: 400,
                height: 300,
                animation: true,
                store: graphStore,
                legend: {
                    position: 'right'
                },
                axes: [{
                    type: 'numeric',
                    position: 'left',
                    grid: true,
                    fields: ['ha'],
                    renderer: function(v) {
                        return v;
                    }
                }, {
                    type: 'numeric',
                    position: 'bottom',
                    grid: true,
                    adjustByMajorUnit: false,
                    fields: ['kg'],
                    label: {
                        rotate: {
                            degrees: -45
                        }
                    }
                }],
                series: [{
                    type: 'line',//<-----------
                    smooth:true,//<-----------
                    fill:true,//<-----------
                    axis: 'left',
                    xField: 'kg',
                    yField: 'ha',
                    style: {
                        opacity: 0.80
                    },
                    highlight: {
                        fillStyle: '#125489',
                        lineWidth: 2,
                        strokeStyle: '#fff'
                    },
                    tooltip: {
                        trackMouse: true,
                        style: 'background: #fff',
                        renderer: function(storeItem, item) {
                            this.setHtml(storeItem.get('ha') + ': ' + storeItem.get('kg'));
                        }
                    }
                }],
                renderTo: Ext.getBody()
            });
        }
    });
}

});

Answer №2

To achieve a smoother line series, utilize the smooth: true setting.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error messages are appearing during the installation of mediasoup

Attempting to install via Command Prompt on Windows 7 64-bit following the command npm cache --force clean ...

There seems to be an issue with the functionality of $apply in angular when used in conjunction with form

I've encountered an issue with my code where the form submission doesn't work properly unless I wait a few milliseconds before submitting. The problem seems to be related to setting the value of a hidden field called paymentToken. My goal is to ...

Is there a way to render an image onto a canvas using an input tag?

Looking to create an image preview using canvas? Upload the image with the input tag and watch it display on canvas. I've experimented with various methods such as using img tags, setting img src for canvas using img tags, and trying onclick function ...

Setting an action when clicking on a slice of a Doughnut chart using Chart.js

I have been working on integrating chart.js into my Django Project, and so far it has been going smoothly. I successfully created a doughnut chart with two slices. Now, I am trying to implement separate actions for each slice when clicked, such as redirect ...

Modifying the date formatting in JavaScript if it is incorrect

Recently, I developed a mobile application that can scan QR-CODEs containing various information, including a date. However, there have been changes in the format of the date within the QR-CODE between previous and new versions. Previously, the date was fo ...

Custom React component - DataGrid

Just starting out in the world of React and attempting to create a custom component with parameters. I'm curious about the correct approach for achieving this. Here's my current code snippet - how do I properly pass Columns, ajax, and datasourc ...

Utilize Angular2 data binding to assign dynamic IDs

Here is the JavaScript code fragment: this.items = [ {name: 'Amsterdam1', id: '1'}, {name: 'Amsterdam2', id: '2'}, {name: 'Amsterdam3', id: '3'} ]; T ...

What is the best way to display "No results found" in Mat-select-autocomplete?

I am working with the mat-select-autocomplete for a multiselect dropdown. When searching for values that are not in the list, I want to display a message saying "No results found". Can someone please help me achieve this? Link to Code ...

Tips for triggering an event from a function instead of the window

Everything is functioning as expected, with the event listener successfully capturing the custom event when it is dispatched from the window and listened for as loading, all seems to be working well. const MyLib = mylib(); function mylib() { const re ...

ReactJS with conditional closing tags

Here is a sample json response : {id: 1, name: a} {id: 2, name: b} {id: 3, name: c} {id: 4, name: d} {id: 5, name: e} {id: 6, name: f} I am looking to organize these by pairs in my React component like so : <div className="group-item"> ...

How can Material UI React handle long strings in menu text wrapping for both mobile and desktop devices?

Is there a way to ensure that long strings in an MUI Select component do not exceed the width and get cut off on mobile devices? How can I add a text-wrap or similar feature? Desktop: https://i.sstatic.net/lo8zM.png Mobile: https://i.sstatic.net/8xoW6. ...

Using Sequelize to Create/Post Data with Many-to-Many Relationship

I've been exploring how to implement a M:N Association using Sequelize. After examining the documentation (doc), I came across a solution that closely matches my requirements: User.belongsToMany(Profile, { through: User_Profile }); Profile.belongsToMa ...

Is there still a need to preload dynamic images in the background?

Imagine you have HTML code that includes an image with a placeholder: <img class="lazy-load" src="http://via.placeholder.com/150/?text=placeholder" data-src="http://via.placeholder.com/150/?text=real%20image"/> At some stage, you want to implem ...

The webpage hosted on Heroku displays a blank background, requiring users to refresh the page with an F5 key

I developed a group chat program using Python microframework flask, vanilla JavaScript, and Flask-SocketIO. The program is deployed on heroku and can be accessed here: . After deployment, I encountered the following issue: While the program worked fine o ...

Can VueJS lifecycle hooks be outsourced?

Is it possible to organize lifecycle hooks (like created / mounted) in a separate file for better simplicity and cleanliness? MyGreatView.vue import created from 'created.js' export default { created, // created() { console.log('vue Cre ...

Do the values returned by window.screen.width and height represent CSS pixels or physical screen pixels?

After exploring the API named screen and visiting this documentation link, my initial anticipation was that I would receive information regarding actual screen size pixels. https://developer.mozilla.org/en-US/docs/Web/API/Screen/width https://i.sstatic.n ...

Enable next-i18next to handle internationalization, export all pages with next export, and ensure that 404 error pages are displayed on non-generated pages

After carefully following the guidelines provided by i18next/next-i18next for setting up i18n and then referring to the steps outlined in this blog post on locize on how to export static sites using next export, I have managed to successfully generate loca ...

How can JavaScript nested AJAX requests and promises be properly chained together?

I'm currently facing a dilemma when it comes to setting the correct order of execution for the tasks at hand. Let's say I need to initiate an AJAX call, then handle the data and store it in IndexedDB using the idb-keyval library, which operates o ...

Spin: twist beyond 360 degrees or less than 0 degrees

Attempting to rotate an arrow indicating wind direction using the transform: rotate() property. The data for rotation is retrieved from an API fetch, and conventional measurement of wind direction involves indicating where the wind is coming from. Therefo ...

Error: Attempting to access a property called 'name' on an undefined variable leads to a TypeError

I am a beginner with MongodB and nodejs. I have successfully implemented the GET method, which returns an empty array. However, when I tried to use POST in Postman for "categories," I encountered this error message: ExpressJS categories route app.js Err ...