Home Forums Chart Support Grouping Data in Column Chart

Grouping Data in Column Chart

Viewing 4 posts - 1 through 4 (of 4 total)
  • #31586

    If I have a column chart with the following datapoints, I wanted to know what the best way to group data would be. My requirements are that each column should be able to be grouped like in the linked photo, even if the number of datapoints in each group is different.

    This is my example dataset:

    var chart = new CanvasJS.Chart("chartContainer", {
        text: "Column Chart"
      data: [{
        type: 'column',
        dataPoints: [
          { label: 'Chrome', y: 1 },
          { label: 'Safari', y: 2 },
          { label: 'Chrome', y: 3 },
          { label: 'Safari', y: 4},
          { label: 'Chrome', y: 5 },
      }, ]

    Grouped Chart Transformation

    • This topic was modified 3 years, 8 months ago by ksubendran.


    You can use x value along with label property to achieve your requirements as shown in this JSFiddle.

    Manoj Mohan
    Team CanvasJS


    Thanks for the help Manoj! In addition to the code in your JSFiddle, is there some option to hide the xAxis tick mark for the blank datapoint?



    Disabling tick for a particular axis label is not possible as of now. However, you can remove all the ticks by setting tickLength property to zero.

    Manoj Mohan
    Team CanvasJS

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

You must be logged in to reply to this topic.