How is chartjs-size-monitor created?
See original GitHub issueI’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
Issue Analytics
- State:
- Created 5 years ago
- Comments:15 (4 by maintainers)
Top Results From Across the Web
Responsive Charts - Chart.js
Chart.js provides a few options to enable responsiveness and control the resize behavior of charts by detecting when the canvas display size ......
Read more >Set Chart Size with ChartJS - Mastering JS
To set the chart size in ChartJS, we recommend using the responsive option, which makes the Chart fill its container.
Read more >How to Keep the Chart Size Consistent While Changing ...
How to Keep the Chart Size Consistent While Changing Screen Size in Chart ... The Chart JS library made it easier to render...
Read more >How to Resize the Chart and maintainAspectRatio in Chart JS
How to Resize the Chart and maintainAspectRatio in Chart JSThe resizing of the chart in Chart JS is luckily an easy to grasp...
Read more >How to Make Font Size Responsive Based on ... - YouTube
How to Make Font Size Responsive Based on Screen Size in Chart.js In this video we ... The Chart JS library made it...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
To make sure that your chart resizes properly, make sure that the canvas is inside a
<div>
that isdisplay: block
and that is not used for anything else, ie the<canvas>
is the only child of that div@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.