Grouped bar chart(stacked Column), gap between the bars, index Label, legends

[SushmithaBR]

Hi Team,

1. Am trying to create a grouped bar chart (stackedColumn), where i have gap between each dataPoint, but in each dataPoint i have 3 bars without gap, is it possible to provide space between each bar in dataPoint ?

2. Am giving indexLabel for each point in dataPoints, But its getting overlapped on same indexLabel. is it possible to give indexLabel for each point in dataPoints ?

In the JSFiddle i have shared my code, https://jsfiddle.net/1f0wLysj/

3. Legends:
In the link i have shared, below are the legends am displaying
blue – meals
red – snacks …
But, in my case:
First dataPoint blue tends to meals_1, red tends to snacks_1
Second dataPoint blue tends to meals_2, red tends to snacks_2
What is the best way to display legends for the above requirement ?

[SushmithaBR]

Hi Team,
Sorry, below is the Link for the Code
https://jsfiddle.net/1f0wLysj/

Thanks in Advance

[Indranil]

@sushmithabr,

1. Am trying to create a grouped bar chart (stackedColumn), where i have gap between each dataPoint, but in each dataPoint i have 3 bars without gap, is it possible to provide space between each bar in dataPoint ?

Sorry, it is not possible to add gaps between dataPoints in multiseries column chart as of now.

2. Am giving indexLabel for each point in dataPoints, But its getting overlapped on same indexLabel. is it possible to give indexLabel for each point in dataPoints ?

In the JSFiddle i have shared my code, https://jsfiddle.net/1f0wLysj/

Based on the example shared, the axisYType property has been assigned to values “first” and “third”. Whereas, it can only be set to “primary” or “secondary”. Currently on setting the acceptable values to axisYType, the indexLabel are center aligning between the dataPoints which is a known bug and we would be fixing in future versions.

If you are trying to assign each dataSeries to a specific y-axis you can set axisYIndex property to the index of the y-axis the dataSeries should be attached to.

3. Legends:
In the link i have shared, below are the legends am displaying
blue – meals
red – snacks …
But, in my case:
First dataPoint blue tends to meals_1, red tends to snacks_1
Second dataPoint blue tends to meals_2, red tends to snacks_2
What is the best way to display legends for the above requirement ?

Legends are assigned to individual dataSeries and not to each dataPoints for column charts as of now.

___________
Indranil Deo
Team CanvasJS

[mm]

Hello,

the indexLabel are center aligning between the dataPoints which is a known bug and we would be fixing in future versions.

I just stumbled upon this issue as well. Do you have a plan when this is going to be fixed?

[Vishwas R]

@mm,

Sorry for the inconvenience caused. We will fix it in our upcoming versions and we will keep you posted once the bug is fixed.

—
Vishwas R
Team CanvasJS

[Vishwas R]

[UPDATE]

@mm,

We have just released CanvasJS Charts v3.7.2 with this fix. Please refer to the release blog for more information. Do download the latest version from our download page and let us know your feedback.

—
Vishwas R
Team CanvasJS

[mm]

@Vishwas R

this does look good, thanks for the update