In Line chart how to images left side of threshold marker line across the Y-Axis with dynamic data.

[Arindam Biswas]

Hi Team,

I have a requirement to show images left side of the threshold marker dotted line in red. I am getting threshold data in API response and it will change based on the type of data I am showing, I can not use static % value in the annotation.

As of now, I am using the stripline property of primaryYaxis to show the red dotted threshold lines as below, which is dynamic.

 stripLines: [

          {

            start: Number(selectedObservationDetail.ReferenceRange.HighValue),

            size: 1,

            sizeType: 'Pixel',

            dashArray: '2,2',

            color: STRIP_LINE_COLOR,

          },

          {

            start: Number(selectedObservationDetail.ReferenceRange.LowValue),

            size: 1,

            sizeType: 'Pixel',

            dashArray: '2,2',

            color: STRIP_LINE_COLOR,

          },

I have to show images to the left of the same striplines as shown in the above image.

Below is chart data for X and Y axis

 data: Object[] = [

    { x: new Date(2020, 6, 1), y: 70, dummy: 'arindam' },

    { x: new Date(2020, 6, 2), y: 75, dummy: 'arindam' },

    { x: new Date(2020, 6, 3), y: 74, dummy: 'arindam' },

    { x: new Date(2020, 6, 4), y: 72, dummy: 'arindam' },

    { x: new Date(2020, 6, 5), y: 80, dummy: 'arindam' },

    { x: new Date(2020, 6, 6), y: 82, dummy: 'arindam' },

    { x: new Date(2020, 6, 7), y: 60, dummy: 'arindam' },

  ];

Please suggest me a way to achieve this with Syncfusion chart component.

Let me know if any further information is required. It will be a great help if you can share some examples.

[Durga Gopalakrishnan]

Hi Arindam, 

 

We have validated your reported scenario with provided screenshot and code snippet. We suggest you to use annotations to display the images on left side. You can specify coordinate units as point to render annotation is specific point. We have prepared sample as per and attached for your reference. Please check with below code snippet and screenshot. 

 

Code Snippet 

 

public annotations: Array<object> = [ 

        { 

            x:new Date(2020, 6, 1),  

            y:30, 

            coordinateUnits: 'Point', region: 'Series', 

            content: '<div id="chart_annotation1"><img height=20px;width=20px; src = "https://www.pngrepo.com/png/98494/180/thick-up-arrow.png"></div>' 

        }, 

       //… 

] 

public primaryYAxis: Object = { 

      stripLines: [{ 

                start: 30,  

                dashArray:'2,3', 

                sizeType:'Pixel', 

                color: 'red' 

            }, 

            //… 

     ] 

} 

 

Screenshot 

 

 

Sample 

https://stackblitz.com/edit/angular-s18age-wxbfdj 

 

Kindly revert us, if you have any concerns. 

 

Regards, 

Durga G