How is chartjs-size-monitor created?

[everdimension]

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

[etimberg]

@everdimension the resize monitor div is added by https://github.com/chartjs/Chart.js/blob/master/src/platforms/platform.dom.js#L264

[etimberg]

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

[everdimension]

@etimberg Yeah i found the source code, I just didn't understand why there wasn't such an element in my case

---

Anyway, I found the problem. It was that my react component was rerendering the parent element, and of course when it was rerendering it was removing the .chartjs-size-monitor which was added by the library and wasn't represented by jsx.

So I just created a special wrapper component for the chart with shouldComponentUpdate returning false. Now everything works as in the examples.

[carolyn-ma]

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

Thanks for pointing it out! This really should be highlighted in the docs. People like me might be able to save so much time looking into weird behaviors.

[simonbrunel]

@carolyn-ma https://www.chartjs.org/docs/latest/general/responsive.html#important-note

[carolyn-ma]

@carolyn-ma https://www.chartjs.org/docs/latest/general/responsive.html#important-note

Not sure how I managed to miss this. Thanks again.

[ajaymarathe]

Can somebody tell me how to create this type of chart?

[toniton]

@ajaymarathe To do that, you need to make use of the Mixed Chart Feature.

<canvas id="mixed-chart" width="800" height="450"></canvas>

new Chart(document.getElementById("mixed-chart"), {
    type: 'bar',
    data: {
      labels: ["1900", "1950", "1999", "2050"],
      datasets: [{
          label: "Europe",
          type: "line",
          borderColor: "#8e5ea2",
          data: [408,547,675,734],
          fill: false
        }, {
          label: "Africa",
          type: "line",
          borderColor: "#3e95cd",
          data: [133,221,783,2478],
          fill: false
        }, {
          label: "Europe",
          type: "bar",
          backgroundColor: "rgba(0,0,0,0.2)",
          data: [408,547,675,734],
        }, {
          label: "Africa",
          type: "bar",
          backgroundColor: "rgba(0,0,0,0.2)",
          backgroundColorHover: "#3e95cd",
          data: [133,221,783,2478]
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: 'Population growth (millions): Europe & Africa'
      },
      legend: { display: false }
    }
});

You can read more about that here: Click here!

[ajaymarathe]

Thank you so much, it's help me lot.

Thanks Again.

On Sat, Jan 19, 2019 at 3:50 AM Akinjiola Toni notifications@github.com wrote:

@ajaymarathe https://github.com/ajaymarathe To do that, you need to make use of the Mixed Chart Feature.

new Chart(document.getElementById("mixed-chart"), { type: 'bar', data: { labels: ["1900", "1950", "1999", "2050"], datasets: [{ label: "Europe", type: "line", borderColor: "#8e5ea2", data: [408,547,675,734], fill: false }, { label: "Africa", type: "line", borderColor: "#3e95cd", data: [133,221,783,2478], fill: false }, { label: "Europe", type: "bar", backgroundColor: "rgba(0,0,0,0.2)", data: [408,547,675,734], }, { label: "Africa", type: "bar", backgroundColor: "rgba(0,0,0,0.2)", backgroundColorHover: "#3e95cd", data: [133,221,783,2478] } ] }, options: { title: { display: true, text: 'Population growth (millions): Europe & Africa' }, legend: { display: false } } });

You can read more about that here: Click here! http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/chartjs/Chart.js/issues/5379#issuecomment-455706588, or mute the thread https://github.com/notifications/unsubscribe-auth/AsO-lT0Ogmc9C-QgYU6qQGPquBEl9u1Aks5vEkjIgaJpZM4TCJF3 .

[YumoP]

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

[Solat-Ali]

@YumoP Same issue, did you find a solution for it?

[Solat-Ali]

@etimberg Yeah i found the source code, I just didn't understand why there wasn't such an element in my case

Anyway, I found the problem. It was that my react component was rerendering the parent element, and of course when it was rerendering it was removing the .chartjs-size-monitor which was added by the library and wasn't represented by jsx.

So I just created a special wrapper component for the chart with shouldComponentUpdate returning false. Now everything works as in the examples.

Any idea how it can be done with Angular? I'm stuck right now :(

[AnjaniR]

@Solat-Ali I'm also in search of solution in angular for same issue of rerendering the parent element, it is removing the .chartjs-size-monitor. What is the solution?

[raurir]

https://www.chartjs.org/docs/latest/general/responsive.html#important-note

This is documented here now: https://www.chartjs.org/docs/latest/configuration/responsive.html#important-note

[kurkle]

As of chart.js v3, ResizeObserver is used instead of the size monitor, so it is not created anymore