Vertical Line in Chart

[Siegfried Gassner]

We have implementation of chart in WPF and Angular applications. In WPF we implemented Vertical line using Annotations property and VerticalLineAnnotation object.

The result is blue vertical line with label "30 Sep 2022".

In Angular we don't know how to do this, annotation is something different. Please help :)

[Siegfried Gassner]

Any answer, please... it's urgent for us.

[Gopalakrishnan Veeraraghavan]

Hi Siegfried Gassner,

We have analyzed your query and recommend using the stripline to add a vertical line in the chart. To create a vertical stripline, simply add the stripline to the horizontal axis and set the 'visible' option to true. Striplines are rendered within the specified start-to-end range. You can also create a dashed array stripline by using the 'dashArray' property, which renders the striplines with the specified dash array values. Furthermore, you can utilize the 'text' property to add text to the stripline and align it using the 'horizontalAlignment' and 'verticalAlignment' properties. We have attached a sample and screenshot for your reference. Please check the following code snippet.

.

public primaryYAxis: Object = {

        labelFormat: '{value}%',

        title: 'GDP (In Percentage)',

        edgeLabelPlacement: 'Shift',

        majorTickLines: { width: 0 },

        lineStyle: { width: 0 },

        stripLines:[

            { start: 7, size: 1, sizeType: 'Pixel', dashArray:"5,5", horizontalAlignment : "End", verticalAlignment : "Middle", color: "blue", text: "30 Sep 2022", textStyle: {color: "Black"}}

        ]

    };

Sample: https://stackblitz.com/edit/angular-gn3w8e-bjcgc8?file=src%2Fapp.component.ts

Screenshot:


Regards,

Gopalakrishnan

[Siegfried Gassner]

Thanks a lot on answer. This is really very useful. 

We added StripLines, but the lines did not appear.

  this.primaryXAxis.stripLines = [{

       visible: true,

       start: 1,

       size: 1,

       sizeType: 'Pixel',

       dashArray:"5,5",

       horizontalAlignment : "End",

       verticalAlignment : "Middle",

       color: "blue",

       text: "Test",

       textStyle: {color: "Black"}

  }];

Is there any other property that should be enabled or visible so that I can see the lines ?

[Siegfried Gassner]

Dear, 
Ignore the previous comment. The problem is in our chart setup. Everything is solved, you can close the ticket.

Thanks Again, your help was valuable.

[Swetha Babu]

Siegfried,

Most Welcome! Please get back to us if you need any other assistance.