CODEWITHSUNDEEP
javascripthtmlchart.js
Sneha Sharma
Sneha Sharma

Reputation: 59

Chart.js not stretching width as per data

I am using chart.js line chart to show some graph for my data of resource usage for say a particular period where period may vary like last one day, last one week, last one month and so on.. I am using line chart and the code is as below.

Basically I want my canvas to get resized according to the period selected in my dropdown. Say if i select 1 day, the canvas shuld be shrinked to display one day data, I mean if I have to display data for one month, width of my canvas should be 100% (data should be shown in entire canvas) , one week canvas should shrink to say 25% of the whole canvas(data should be shown in 25% of the canvas) and for one day width should be 10% of canvas.

If someone is aware of how this has to be achieved using chart.js, would be helpful

var myData = { labels: timeX, datasets: [{ data: percentageY }] };

    MEMORY_LINE_CHART = new Chart(ctx, {
            type: 'line',
            data: myData,
            options: {
                bezierCurve: false ,
                scaleIntegersOnly: false,
                animation : false,
                responsive: true,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }],
                    xAxes: [{
                        ticks: {
                            display:true
                        }
                    }]
                } // scales
            }
        });

Upvotes: 1

Views: 904

Answers (1)

Tech Perrie
Tech Perrie

Reputation: 11

Usually the charts are displayed like that only, Jus imagine if my max data is 1 year huge. And if the user wishes to see ony for last one day, So big my canvas would be say 600x600 which accommodates around one year data, just imagine how small would be the size for displaying one day data if we keep on reducing the width as per your reqs or specs.

You may see the examples here, which doesn't change the chart width or size

https://finance.yahoo.com/echarts?s=YHOO+Interactive#{%22allowChartStacking%22:true}

http://www.marketwatch.com/investing/stock/live/charts

Give a thought and enjoy charting ;)

Upvotes: 1

Related Questions