Grouping Data in Column Chart

• October 13, 2020 at 1:27 pm #31586
  
  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.
  October 13, 2020 at 6:23 pm #31591
  
  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

  October 14, 2020 at 12:05 pm #31597
  
  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?

  October 14, 2020 at 6:12 pm #31601
  
  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