Grouping Data in Column Chart

[ksubendran]

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", {
  title:{
    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 },
    ]
  }, ]
});

chart.render();

• This topic was modified 4 years, 2 months ago by ksubendran.

[Manoj Mohan]

@ksubendran,

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

—-
Manoj Mohan
Team CanvasJS

[ksubendran]

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?

[Manoj Mohan]

@ksubendran,

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