Posted in Uncategorized

How is chartjs-size-monitor created?

   February 23, 2021  2 Comments on How is chartjs-size-monitor created?

I’m looking at one of the samples: http://www.chartjs.org/samples/latest/charts/area/line-datasets.html

It works and resizes perfectly. But I cannot seem to replicate this behavior in my own chart.

I see that inside the .wrapper element a .chartjs-size-monitor was somehow created alongside the canvas element. I don’t see anything in the sample source code that is responsible for adding this element.

Can you please help me and explain what I need to do to make chart resize with the parent element? I followed this guide but my chart still doesn’t resize properly.

Thanks

Author: Fantashit

2 thoughts on “How is chartjs-size-monitor created?”

  1. To make sure that your chart resizes properly, make sure that the canvas is inside a <div> that is display: block and that is not used for anything else, ie the <canvas> is the only child of that div

  2. @everdimension Do you know Angular way of solving this issue? I tried to create a reusable component of linechart using ChartJS and somehow that div with chartjs-size-monitor is removed when rendering parent component.

Comments are closed.