question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How is chartjs-size-monitor created?

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:15 (4 by maintainers)

github_iconTop GitHub Comments

10reactions
etimbergcommented, Mar 31, 2018

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

3reactions
YumoPcommented, Aug 15, 2019

@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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found