How to render the same series of PivotChart in a single column?
This KB document explains how to render the same series of PivotChart in a single column.
Solution:
You can render PivotChart with each set of series in a single column using the following steps.
Step 1:
In the “load” event of pivot chart, set the “sideBySideSeriesPlacement” property to false.
JavaScript
$("#PivotChart").ejPivotChart({
// dataSource
load: "load",
seriesRendering:"seriesRendering"
})
MVC
@Html.EJ().Pivot().PivotChart("PivotChart1").ClientSideEvents(oEve => { oEve.Load("load").SeriesRendering("seriesRendering"); })
ASP
<ej:PivotChart ID="PivotChart"> <ClientSideEvents Load="load" SeriesRendering="seriesRendering"/> </ej:PivotChart>
Step 2:
Calculate the width of series in the “seriesRendering” event.
JavaScript (event for all platforms)
function load(args) {
this.model.sideBySideSeriesPlacement = false;
}
function seriesRendering(args) {
for (var i = 0; i < this.model.series.length; i++) {
this.model.series[i].columnWidth = 0.7 - (i * 0.1);
}
}
