I want to implement line chart with sparkline

[Yogesh Patil]

Hello,

I want to create a line chart with a threshold. When the threshold value is crossed, a dashed spark line should appear parallel to the Y-axis, as shown in the image.

I am sharing a demo for the same.

https://stackblitz.com/edit/react-jpqhzdyo?file=src%2FApp.js,src%2Ffft-data.json,src%2FWaterfallFFT.js


Thanks,

Yogesh Patil

 

Attachment: sparkLine_2946724f.PNG

[Durga Gopalakrishnan]

Hi Yogesh,

Thank you for reaching out.

You can create a dash array stripline by using the dashArray property in required axis. The striplines will be rendered with the specified dash pattern values. For your reference, we have attached the modified sample. Please check with the below snippet and screenshot.

primaryXAxis={{

        stripLines: [{ start: 29, size: 2, sizeType: 'Pixel', dashArray: "10,5", color: "blue" }]

}}

Sample : https://stackblitz.com/edit/react-ehdjvmqa

UG : https://ej2.syncfusion.com/react/documentation/chart/strip-line#dash-array

Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.