How to show legends for stripLines ?

[Surya]

Currently I am using multiple line chart with Angular its showing legends for both axis but I want that legend for stripLines also. how can I achieve this ?

Attachment: Capture_6d7eef9a.zip

[Durga Gopalakrishnan]

Hi Ashok,

Greetings from Syncfusion.

As of now, we don't have legend support for chart axis striplines. We have done a workaround to acheive your requirement. We suggest you use annotations to display the customized texts, shapes etc. In the sample, we have used chartMouseClick event to enable and disable the striplines while clicking the legend item.

public annotations: Object = [

    {

      x: "20%",

      y: "120%",

      coordinateUnits: "Pixel",

      region: "Series",

      content:

        '<div id="chart_annotation0" style="color:blue;"><div style="margin-right:5px;width:15px;display: inline-block; border: solid blue;"></div>Low Critical</div>'

    }
   //...
]
 public onChartMouseClick(args: IMouseEventArgs): void {

    var annotationId = args.target;

    if (annotationId.indexOf("chart_annotation") >= 0) {

      var stripIndex = args.target.charAt(args.target.length - 1);

      this.chart.primaryYAxis.stripLines[stripIndex].visible = 

             this.chart.primaryYAxis.stripLines[stripIndex].visible  ? false : true;

    }

  }

Sample : https://stackblitz.com/edit/angular-gnemxd-dejnto

Please revert us if you have any concerns.

Regards,

Durga G