Chart.js: 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 [e-mail]
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 :(