Multi Series Range Stacked Chart

[ayush.sa01]

Is it possible to create Multi series range Stacked chart.?
I tried but it becomes Multi series range Bar chart.

In Multi series range Stacked chart, multiple series will come in row just like stacked bar chart but with gaps.
In Multi series range Bar chart, multiple series will come in ladder form.

• This topic was modified 6 years, 10 months ago by ayush.sa01.

[Vishwas R]

@ayush-sa01,

Please take a look at this jsfiddle.

—
Vishwas R
Team CanvasJS

[ayush.sa01]

Then how will I create legends.?
Because when I add attribute showInLegend: true , it shows only 1 legend with name datasries1

[Vishwas R]

@ayush-sa01,

Legends will be shown for dataSeries incase of line, column charts. However you can add custom DOM as legend as shown in this jsfiddle.

—
Vishwas R
Team CanvasJS

[ayush.sa01]

Thanks.
It worked..

[aisolutions]

If you export the chart, then the legend doesn’t print with the chart if its in the DOM. Is there a way around this?

Thanks,
Shannon

[Vishwas R]

Shannon,

When exporting a CanvasJS chart, only the native chart elements are included in the exported image. Custom DOM elements, such as external legends, are not part of the chart and therefore won’t appear in the export.

If your goal is to display custom legends and include them in the exported image, one workaround is to use dummy dataseries to represent those legends within the chart itself. This way, they become part of the chart and will be included in the export. Please checkout the code-snippet demonstrating how to create a dummy series for this purpose:

{
	type: "scatter",
	showInLegend: true,
	legendText: "Dummy Legend",
	legendMarkerType: "square",
	legendMarkerColor: "red",
	dataPoints: [{}] // Empty datapoint
}

This approach ensures that your custom legend appears in the chart area and is included when exporting.

—
Vishwas R
Team CanvasJS