CODEWITHSUNDEEP
jquerychartsgoogle-visualizationpie-chart
Pete
Pete

Reputation: 493

How to get correct legend labels on a Google visualization donut chart

I'm drawing a pie chart with only 2 segments, one segment colored red and the other colored blue. The chart draws correctly but segment colors and the legend use the wrong colors. On the attached screenshot, the blue segment should be red and be labelled Overdue in the legend and the red segment should be blue and labelled Protocol in the legend. The numbers displayed in the segmenats are correct, it's just the colors that are switched.

enter image description here

Here's the code that builds the chart data and assigns the colors.

chartData[0] = ['Status', 'Count', {role: 'style'}]
chartData[1]= ['Overdue',1012,"red"]
chartData[2]= ['Protocol',980,"#BDC667"]
var datatable = google.visualization.arrayToDataTable(chartData);

The chart options are:

var options = {
    title: 'Installed Curtains By Status',
    pieSliceText: 'value',
    chartArea: {
        width: '95%',
    },
    animation: {
        startup: true,
        duration: 1000,
        easing: 'out',
    },
    legend: {position: "right"}
};

What am I doing wrong?

Upvotes: 1

Views: 90

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

the style role is not supported by PieChart
what is shown are the default colors.
instead, use the colors configuration option.

var options = {
  title: 'Installed Curtains By Status',
  pieSliceText: 'value',
  chartArea: {
    width: '95%',
  },
  colors: ["red", "#BDC667"],
  animation: {
    startup: true,
    duration: 1000,
    easing: 'out',
  },
  legend: {position: "right"}
};

check the chart's data format for role availability...

Upvotes: 1

Related Questions