Category / Section
How to change the series colors in PivotChart?
1 min read
This KB illustrates that how to change the series colors in PivotChart.
Solution:
You can change the PivotChart series color as well as the legend by using the following code example.
JavaScript
$("#PivotChart1").ejPivotChart({ url: "../wcf/OlapChartService.svc", load: "onChartLoad" });
var colors = ["aqua", "red", "orange", "blue", "green", "yellow"];
function onChartLoad(args) {
for (var i = 0; i < colors.length; i++)
this.model.series[i].fill = colors[i];
}
ASP
<ej:PivotChart ID="PivotChart1" runat="server" Url="../wcf/OlapChartService.svc">
<ClientSideEvents Load="onChartLoad"/></ej:PivotChart>
<script type="text/javascript">
var colors = ["aqua", "red", "orange", "blue", "green", "yellow"];
function onChartLoad(args) {
for (var i = 0; i < colors.length; i++)
this.model.series[i].fill = colors[i];
}
<script/>
MVC
@Html.EJ().Pivot().PivotChart("PivotChart1").Url(Url.Content("~/wcf/OlapChartService.svc")).ClientSideEvents(clientSideEvent => clientSideEvent.Load("onChartLoad"))
<script type="text/javascript">
var colors = ["aqua", "red", "orange", "blue", "green", "yellow"];
function onChartLoad(args) {
for (var i = 0; i < colors.length; i++)
this.model.series[i].fill = colors[i];
}
<script/>
