customizing stripline

[Manu]

Hello,

Is it possible to make the threshold line dotted (see the image).

I've attached the example which I was trying, can you please check

https://plnkr.co/edit/bPA7Vf6cXTQ4BAGoV7X5?p=preview

[Baby Palanidurai]

Hi Manu, 

Thanks for your patience, we can achieve your requirement by adding annotations in the chart options.  

By using the content option of annotation object, you can specify either the id of the element or directly specify the element in the content that needs to be displayed in the chart area. 

And then, coordinateUnits  property has 2 values in annotations. 

1. Pixel
2. Point

Pixel: x and y values consider as pixel based on `region` property whether it depends on `Chart`(placed the annotation element with respect to container) or `Series` (Placed the annotation element with respect to chart area). 

Point: x is represented as series points(x and y). 

As for your requirement, we have prepared a sample with annotations. We have created two annotation and added it to the annotation collection, and added svg line for each annotation content property in the point {x: 1 , y: 10 } and point {x: 1, y: 5}. 

Then we have changed svg line positions based on chart area border positions in the chart loaded event. 

The chart border ID will always be chart’s Id +”_ChartAreaBorder” and chart Annotations ID will be chart’s Id+”_Annotation_”+Annotation index. 

For more information on annotations, can be find from below link, 

http://npmci.syncfusion.com/production/angular/documentation/chart/chart-annotations.html 

Please find the code snippet below to achieve this requirement. 

HTML: 

<ejs-chart id="chart-container" (loaded)='loaded($event)' > 

        <e-annotations> 

           <e-annotation  content='<svg id="myannot" height="5" width="500"> 

  <line id="myline" x1="0" y1="0" x2="500" y2="0" stroke-dasharray="5" style="stroke:rgb(255,0,0);stroke-width:5" /> 

</svg>' region='Series' coordinateUnits='Point' x=1 y=15> 

            </e-annotation> 

            <e-annotation  content='<svg id="myannot1" height="5" width="500"> 

  <line id="myline1" x1="0" y1="0" x2="500" y2="0" stroke-dasharray="5" style="stroke:blue;stroke-width:5" /> 

</svg>' region='Series' coordinateUnits='Point' x=1 y=5> 

            </e-annotation> 

            <e-annotation  content='3α' region='Series' coordinateUnits='Point' x=10 y=6 horizontalAlignment='Near'> 

            </e-annotation> 

        </e-annotations> 

   </ejs-chart> 

TS: 

public loaded(args: ILoadedEventArgs): void { 

        var chartAreaRect=document.getElementById('chart-container_ChartAreaBorder'); 

         

        //Adding first annoation  

        var myAnnotation=document.getElementById('chart-container_Annotation_0'); 

        var mySVGLine=document.getElementById('myline'); 

        var mySVG=document.getElementById('myannot'); 

        myAnnotation.style.left=chartAreaRect.x.baseVal.value.toString()+"px"; 

        mySVG.width.baseVal.value=chartAreaRect.width.baseVal.value; 

        mySVGLine.x2.baseVal.value=chartAreaRect.width.baseVal.value; 

         

        // Adding second annotaion 

        var myAnnotation1=document.getElementById('chart-container_Annotation_1'); 

        var mySVGLine1=document.getElementById('myline1'); 

        var mySVG1=document.getElementById('myannot1'); 

        myAnnotation1.style.left=chartAreaRect.x.baseVal.value.toString()+"px"; 

        mySVG1.width.baseVal.value=chartAreaRect.width.baseVal.value; 

        mySVGLine1.x2.baseVal.value=chartAreaRect.width.baseVal.value; 

        

    } 

Screenshot: 

 

Sample for your reference can be find from below link, 

https://plnkr.co/edit/6i3jstGsGOCys1FIJ6ea?p=preview 

Kindly revert us, if you have any concerns. 

Thanks, 

Baby.