Setting colorSets in a StackedColumn Chart

• December 12, 2018 at 11:58 pm #23701
  
  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

  December 13, 2018 at 12:00 am #23702
  
  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.

  December 13, 2018 at 12:10 am #23703
  
  guilhermemaranhao

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

  Solved!

  December 13, 2018 at 11:01 am #23706
  
  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

  December 13, 2018 at 4:00 pm #23719
  
  guilhermemaranhao

  That’s it! Thank u!