How to Add a Dashed Array or Strip Line to a Pivot Chart

[Dean M]

Hello,

I'm trying to add a vertical dashed line or strip line to my stackingbar pivot chart. I would want to pass in a value and render the line in the chart vertically ontop of the bars from the xAxis. I don't see anything in the documentation to support dash lines or strip lines in the pivot chart but only in the e-chart.

this.chartSettings = {

      chartSeries: { type: 'StackingBar', legendShape: 'Rectangle' },

      legendSettings: { visible: true, position: 'Top', textStyle: { size: '14px', color: '#656a70' } },

      primaryXAxis: {},

      primaryYAxis: {},

      tooltip: {

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

      },

    } as ChartSettings;

    this.primaryYAxis = this.displayOption = { view: 'Chart' } as DisplayOption;

<ejs-pivotview

      #pivotview

      id="PivotView"

      [dataSourceSettings]="dataSourceSettings"

      [chartSettings]="chartSettings"

      [displayOption]="displayOption"

      tooltipTemplate="#Template"

      [toolbar]="toolbarOptions"

      allowDrillThrough="true"

      width="width"

      height="height"

      allowConditionalFormatting="true"

      [legendSettings]="legendSettings"

      (chartSeriesCreated)="chartSeriesCreated($event)"

    ></ejs-pivotview>

[Saranya Sivan]

Hi Dean, 

 

Thanks for contacting Syncfusion support. 

 

Based on your requirement, we have prepared a sample to apply vertical and horizontal striplines in stacking bar pivot chart for your reference. Please check the below sample and UG for your reference. 

 

Sample: https://stackblitz.com/edit/angular-azx3ku-fprkjj?file=app.component.ts 

 

UG: https://ej2.syncfusion.com/angular/documentation/pivotview/pivot-chart/#label-customization 

 

Please let us know if you have concern. 

 

Regards, 

Saranya Sivan.