CODEWITHSUNDEEP
javascripthtml5-canvaspie-chart
gc5
gc5

Reputation: 9868

How to change colors in pie charts using canvasxpress

I have a pie chart with two types of data: ok and not ok. I want to render ok with green and not ok with red. I have searched in the documentation but with no results. So far my code is:

new CanvasXpress("orderProgressCanvas", {
  "y": {
    "vars": [
      "Ok",
      "No"
    ],
    "smps": [
      "Percentuale completamento"
    ],
    "colorRGB": [
      "rgb(0,255,0)",
      "rgb(255,0,0)"
    ],
    "data": [
      [
        progress
      ],
      [
        100-progress
      ]
    ]
  }
}, {
  "graphType": "Pie",
  "pieSegmentPrecision": 1,
  "pieSegmentSeparation": 2,
  "pieSegmentLabels": "outside",
  "pieType": "solid",
  "showLegend": false,
  "background" : "rgb(192,208,216)"
});

But color definition doesn't work.. any idea? progress is a javascript variable from 0 to 100.

Thanks

Upvotes: 2

Views: 1088

Answers (1)

gc5
gc5

Reputation: 9868

I asked to the main developer:

Just put the colors you want in the colors property in the configuration. They will be selected in the order you specify them. Also make sure you specify enough colorr otherwise they will be recycled as they are used.

'colors': ['rgb(234,234,1)', 'rgb(56,35,12)'.......etc]

My code has become:

new CanvasXpress("orderProgressCanvas", {
  "y": {
    "vars": [
      "Ok",
      "No"
    ],
    "smps": [
      "Percentuale completamento"
    ],
    "data": [
      [
        progress
      ],
      [
        100-progress
      ]
    ],
  }
}, {
  "graphType": "Pie",
  "pieSegmentPrecision": 1,
  "pieSegmentSeparation": 2,
  "pieSegmentLabels": "outside",
  "pieType": "solid",
  "showLegend": false,
  "background" : "rgb(192,208,216)",
  "colors": [
           "rgb(57,133,0)",
           "rgb(163,0,8)"
           ],
});

Upvotes: 2

Related Questions