Home forums Using CanvasJS Setting colorSets in a StackedColumn Chart

This topic contains 4 replies, has 2 voices, and was last updated by  guilhermemaranhao 8 months, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #23701

    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

    #23702

    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.

    #23703

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

    Solved!

    #23706

    @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

    #23719

    That’s it! Thank u!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.