Automatic resize of chart - AngularChartJS

Question

I'm working on a stacked bar data chart in order to display some informations using Chart.js 2.0.2 and Angular-Chart 1.0.0.

I would like to detect when the user scroll to the end of the chart container, then add some data to the chart by keeping the ratio (height/width) of the chart.

The thing is, chart.js provides an iframe and I don't know how to add data and keep the space between bar for example. If I resize the canvas, this doesn't work. I have a basic chart with options.responsive = true, and I add data to this chart.

However, even if only the chart wrapper width changes programmatically, the height of the chart changes too. This is a strange behavior of responsiveness.

Is it another way to change only the width of the chart to keep the same space between bar chart ?

jonbovy jonbovy · Accepted Answer · 2017-06-16T15:39:04

do this:

options: {
    responsive: true,
    maintainAspectRatio: false
};

Then you can pragmatically update the height/width as you see fit with:

chart.canvas.parentNode.style.width = '128px';

//NOTE: I'm running 2.6

Automatic resize of chart - AngularChartJS

1 Answers