Setting colorSets in a StackedColumn Chart

[guilhermemaranhao]

Hi there,

I’m trying to set four color in a stackedColumn chart. Is it possible?

var colorSet1 = [];
          var colorSet2 = [];
var colorSet3 = [];
          var colorSet4 = [];
          CanvasJS.addColorSet("colorSet1", colorSet1);
          CanvasJS.addColorSet("colorSet2", colorSet2);
          CanvasJS.addColorSet("colorSet3", colorSet3);
          CanvasJS.addColorSet("colorSet4", colorSet4);
var chart2 = new CanvasJS.Chart("chart1", {
              colorSet:  ["colorSet1", "colorSet2", "colorSet3", "colorSet4"],
              data: [
                  {
                      type: "stackedColumn",
                      dataPoints: dataPoints1
                  },
                  {
                      type: "stackedColumn",
                      dataPoints: dataPoints2
                  },
                  {
                      type: "stackedColumn",
                      dataPoints: dataPoints3
                  },
                  {
                      type: "stackedColumn",
                      dataPoints: dataPoints4
                  },
              ],
          });
$.ajax({
              url: "<%= root_url %>my_service,
              dataType: 'json',
          }).done(function (results) {
                  if (something)
                  {
                          colorSet1.push("#3D9140");
                   }
                  if (something-else)
                  {
                          colorSet2.push("#FFFF00");
                   }
                if (something-else)
                  {
                          colorSet3.push("#FFFFF1");
                   }
                if (something-else)
                  {
                          colorSet4.push("#FF2222");
                   }

          });
              CanvasJS.addColorSet("colorSet1", colorSet1);
              CanvasJS.addColorSet("colorSet2", colorSet2);
              CanvasJS.addColorSet("colorSet3", colorSet3);
              CanvasJS.addColorSet("colorSet4", colorSet4);
              chart2.render();
          });

Is my colorSet (inside chart declaration) correct? How can I go for it?

Thank you, Guilherme

[guilhermemaranhao]

The problem is that the chart is getting the default colors, not the ones I’m setting.

And the arrays

CanvasJS.addColorSet("colorSet1", colorSet1);
              CanvasJS.addColorSet("colorSet2", colorSet2);
              CanvasJS.addColorSet("colorSet3", colorSet3);
              CanvasJS.addColorSet("colorSet4", colorSet4);

are all being properly populated.

[guilhermemaranhao]

Ow, it’s just to use dataPoints.push({color:”#FFFFF”})

Solved!

[Vishwas R]

@guilhermemaranhao,

Colorset is used to define your own Color Set to the charts whereas color in dataPoint level sets the color of specific dataPoint.

—
Vishwas R
Team CanvasJS

[guilhermemaranhao]

That’s it! Thank u!