Change Fill Colors for StackingBar Chart Within PivotChart

[Dean M]

Hello,

I am using a stacking bar chart within a pivot view tag and would like to know how to change the fill colors of the stacking bars?

this.chartSettings = {

      title: 'Stacking Bar Chart',

      chartSeries: { type: 'StackingBar' },

      primaryXAxis: {},

      primaryYAxis: {},

      tooltip: {

        template: '<span class="e-tooltip-wrap e-popup"><b>${rowHeaders}</b><br/><br/><b>${value}</b> ${columnHeaders}<br/> </span>',

      },

<ejs-pivotview

      #pivotview

      id="PivotView"

      [dataSourceSettings]="dataSourceSettings"

      [chartSettings]="chartSettings"

      [displayOption]="displayOption"

      tooltipTemplate="#Template"

      [toolbar]="toolbarOptions"

      allowDrillThrough="true"

      width="width"

      height="height"

    ></ejs-pivotview>

[Sivamathi Natarajan]

Hi Dean, 

 

Thanks for contacting Syncfusion support. 

 

Kindy customize the default color of pivot chart by providing a custom color palette of your choice by using the palettes property. Meanwhile, we have prepared a sample for your reference. 

 

Sample: https://stackblitz.com/edit/angular-uvwwfc-4nwoce?file=app.component.ts 

 

Please let us know if you have concern. 

 

Regards, 

Sivamathi. 

[Dean M]

That worked. Thank you for your response. I was also able to get it work by creating this method:

 chartSeriesCreated(args: ChartSeriesCreatedEventArgs) {

    args.series[0].fill = '#b4cb34';

    args.series[1].fill = '#77b8ae';

  }

[Sivamathi Natarajan]

Hi Dean, 

 

Thanks for reply. 

 

Regards, 

Sivamathi.