Changing color of dataSeries using set() - CanvasJS JavaScript Charts

Changing color of dataSeries using set() - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
                               {
  title:{
    text: "Changing color of dataSeries using set()"
  },
  data: [
    {
      type: "bubble",
      dataPoints: [
        { x: 64.8, y: 2.66, z:12074.4 , name: "India"},
        { x: 73.1, y: 1.61, z:13313.8, name: "China"},
        { x: 78.1, y: 2.00, z:306.77, name: "US" },
        { x: 68.5, y: 2.15, z: 237.414, name: "Indonesia"},
        { x: 72.5, y: 1.86, z: 193.24, name: "Brazil"},
        { x: 76.5, y: 2.36, z: 112.24, name: "Mexico"},
        { x: 50.9, y: 5.56, z: 154.48, name: "Nigeria"},
      ]
    },
    // comment out the second dataSeries to set the predifined color to the dataSeries
    { 
      type: "bubble",
      dataPoints: [
        { x: 82.9, y: 1.37, z:127.55, name: "Japan" },
        { x: 79.8, y: 1.36, z:81.90, name:"Australia" },
        { x: 72.7, y: 2.78, z: 79.71, name: "Egypt"},
        { x: 80.1, y: 1.94, z:61.81, name:"UK" },
      ]
    }
  ]
});

chart.render();

// incase of one dataSeries, set a custom color
if(chart.options.data.length === 1) {
  chart.data[0].set("color", "#369EAD"); // custom color to be set
} // else let CanvasJS handle the color of dataSeries for multiseries charts