Hiding null/empty Y columns

[laurenth]

Hello,

I’ve got a mulitple data series column chart, the data is as follows:

[{
        type: "column",
        name: "Algorithm 1",
        legendText: "Manual Algorithm",
        showInLegend: true,
        dataPoints:[
          {label: "Desktop", y: 211, x: 1},
          {label: "Tablet", y: 137, x: 3}
        ]
      },
      {
        type: "column",
        name: "Algorithm 2",
        legendText: "Reviews Algorithm",
        showInLegend: true,
        dataPoints:[
          {label: "Desktop", y: 211, x: 1},
          {label: "Mobile", y: 175, x: 2},
          {label: "Tablet", y: 85, x: 3}
        ]
      },
      {
        type: "column",
        name: "Algorithm 3",
        legendText: "Commission Algorithm",
        showInLegend: true,
        dataPoints:[
          {label: "Mobile", y: 175, x: 2},
          {label: "Tablet", y: 211, x: 3}
        ]
      },
      {
        type: "column",
        name: "Algorithm 4",
        legendText: "Commission Algorithm",
        showInLegend: true,
        dataPoints:[
          {label: "Desktop", y: 55, x: 1},
          {label: "Mobile", y: 175, x: 2}
        ]
      },
      {
        type: "column",
        name: "Algorithm 5",
        legendText: "Commission Algorithm",
        showInLegend: true,
        dataPoints:[
          {label: "Desktop", y: 211, x: 1},
          {label: "Mobile", y: 20, x: 2},
          {label: "Tablet", y: 353, x: 3}
        ]
      },
      {
        type: "column",
        name: "Algorithm 6",
        legendText: "Commission Algorithm",
        showInLegend: true,
        dataPoints:[
          {label: "Tablet", y: 175, x: 3}
        ]
      },
      {
        type: "column",
        name: "Algorithm 7",
        legendText: "Commission Algorithm",
        showInLegend: true,
        dataPoints:[
          {label: "Desktop", y: 211, x: 1}
        ]
      }
    ]

As you can see each serie is “grouped” in 3 categories (Desktop/Mobile/Tablet), but each serie is not necessarily present in each of those categories (hence the missing data point for some of them).

The chart is automatically filling the missing values with “ghost” columns, so they appear as gaps in the display.
If I remove the x: value for each data point, it becomes even messier, the series are not “grouped” by Desktop/mobile/tablet anymore.

Ideally I would like to still have 3 blocks of columns, 1 for each category, but no gaps where there should be a missing serie.

Has anyone ever done that?

Many thanks,
Laurent

EDIT: here’s the code for the graph:

 @chart = new CanvasJS.Chart("chartContainer",
    {
      theme: "theme3",
      animationEnabled: true,
      title:{
        text: "Average Commission per 1000 Searches",
        fontSize: 30
      },
      data: @get('series')})

    @chart.render()

• This topic was modified 9 years, 4 months ago by laurenth. Reason: wrong data, added chart code

[Anjali]

laurenth,

This is not possible as of now. But you can consider using stackedColumn chart instead.

____
Anjali