Displaying Legend only once when Several pie charts are drawn in the same page using chart.js

0
votes

I am drawing several pie charts using chart.js in the same page. All pie charts have the same legend. The following code is used to draw the pie-chart with the legend for each pie-chart.

$scope. drawFunction = function()
        {

     new Chart(canvasVal, {
            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: true}
            }
        });
    }

HTML

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

Currently the same legend is displayed for each chart. Can I display one common legend for all drawn pie-charts?

UPDATE

I am extremely sorry for tangling the code. Please find the below code snippet

 $scope.drawFunc = function()
    {
    new Chart(document.getElementById("pie-chart"), {
        type: 'pie',
        data: {
          labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
          datasets: [{
            label: "Population (millions)",
            backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
            data: [2478,5267,734,784,433]
          }]
        },
        options: {
          title: {
            display: true,
            text: 'Predicted world population (millions) in 2050'
          },
          legend: {
          display: true
}
        }
    });
    }
1
angularjschart.jspie-chartlegend-properties
Doesn't look like a pie chart to me! - Rounak
Try this: stackoverflow.com/questions/40547410/… - Rounak

1 Answers

0
votes

Instead of hard coding the boolean value for display property of legend I passed its value as a parameter each time the draw function is called.

$scope.drawFunc = function( legendBoolValue)
    {
    new Chart(document.getElementById("pie-chart"), {
        type: 'pie',
        data: {
          labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
          datasets: [{
            label: "Population (millions)",
            backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
            data: [2478,5267,734,784,433]
          }]
        },
        options: {
          title: {
            display: true,
            text: 'Predicted world population (millions) in 2050'
          },
          legend: {
          display: legendBoolValue
}
        }
    });
    }