Chartjs not rendering when legend display true

38 views Asked by At

I'm trying to use chartjs(pie) to display some data on the screen. On the first load the screen works perfectly, but when trying to update the pie (using the same code in which it was created) it simply disappears and does not show errors in the console.

The code below does not work when I try to update the chart data

chartList[0].destroy();
chartList[0] = new Chart($("#chart"), {
                type: "pie",
                data: {
                    datasets: [{
                        data: [15,20,30],
                        backgroundColor: ["rgba(255, 99, 132, 1)","rgba(255, 206, 86, 1)","rgba(54, 162, 235, 1)"],
                    }],
                    labels: ["Red","Yellow","Blue"],
                },
                options: {
                    legend: {
                        display: true,
                        position: 'bottom',
                    }
                }
            });

But if I put "display: false" it renders normally but without the caption.

chartList[0].destroy();
chartList[0] = new Chart($("#chart"), {
                type: "pie",
                data: {
                    datasets: [{
                        data: [15,20,30],
                        backgroundColor: ["rgba(255, 99, 132, 1)","rgba(255, 206, 86, 1)","rgba(54, 162, 235, 1)"],
                    }],
                    labels: ["Red","Yellow","Blue"],
                },
                options: {
                    legend: {
                        display: false,
                        position: 'bottom',
                    }
                }
            });

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js

I already tried using more current versions of chartjs but the problem persists.

1

There are 1 answers

0
Diego Sampaio On

After a few hours of debugging chartjs, I discovered that it misses some label parameters in the legend. After informing the parameters the chart returned to display perfectly

options: {
  legend: {
    display: true,
    position: 'bottom',
    labels: {
      boxWidth: 40,
      padding: 10
    }
  }
}