Line Chart guidelines

[bankszorsqt]

Hi guys, is it possible to configure a simple line (possibly dotted) on X-axis, and have a label with a proper value on it? If not, is there a "workaround" for it right now?

Thanks in advance.

[mharrington622]

Could you provide more information about which chart you are using?

[bankszorsqt]

CategoryChart > type: Line. Thanks. @mharrington622

[bankszorsqt]

@mharrington622 Something like this (on hover), but crosshairs/guides should be fixed at a certain value position regarding given input.

[mharrington622]

@Bank5z0rSqt Thanks for the clarification! You can accomplish this with a workaround by actually freezing the crosshair at the desired position. You would have to enable the crosshair by setting the crosshairsDisplayMode property to "Vertical". Then, in the seriesAdded event handler, you can set the cursorPosition of the crosshair. cursorPosition takes an object such as: {x: number, y: number}.

Since we don't need to worry about the y positon, this can just be set to 1. The x will need to be the world-space of the x-axis between 0 and 1. So, to show the line on the 4th of 6 category items, it should be set to 0.66. You can see an example of how I have done this from this StackBlitz sample. Note that since we are freezing the crosshair, you won't be able to use the crosshair with this workaround.

If you need anything else, please let me know and I will be glad to help.

[bankszorsqt]

Nice solution, our case specifically was crosshairsDisplayMode property "Horizontal", and we need to base line height on Y-axis value, which we get as input. Your proposed solution makes input as (0-1) X value input (Which are the min and max chart values), which means we can't create a line that is out of the scope of those values. We bought igniteui-angular commercial license and got stuck by this problem which seems "trivial" compared by what you offer with entire framework. :1st_place_medal:

Here is a screenshot of desired result (*in our case we need line chart)

@mharrington622 Thanks for providing support, I hope we can find a solution for this one. :)

[andreas-gross-sematell]

I want to second this feature request. I, too, need a feature to somehow mark data points that are above given reference points. For example it would be greate to mark data points in the given example that are above 100.

Having more that one such treshold would be very nice. The suggested solution by having some lines (similar to the cursors) that can be defined to show tresholds would be very nice. The feature request https://github.com/IgniteUI/igniteui-angular-charts/issues/11 would also be a nice solution because then I could define a reference area for data points that are "OK", data points that are "a little bit high" and datapoints that are "very high".

Thanks guys for your great framework. We did buy it and switched from amcharts to ignite because of the good linechart performance.

[andreas-gross-sematell]

Is there a possibility in the API that enables us to implement something like this ourself? Can I for example get the coordinates of an y value in the canvas? Then I could draw in the canvas myself.

My product owner sees this as a must have feature and our release is soon.

[igMPeterson]

Thank you for the update. To achieve this behavior I would recommend that you use the igxDataChart instead of the igxCategoryChart, as it is more robust and better at allowing custom behavioir: https://www.infragistics.com/products/ignite-ui-angular/angular/components/datachart_series_types_category.html

To achieve this with the igxDataChart you would create an extra line series that has two points of data. The values for the x-axis would be at either end of your x-axis range either the category field. Then the value of the y-axis would be the point/level you want the line to appear at.

[gmurray81]

Our valueOverlay series would be most useful for this sort of scenario, but I don't believe we have published them for Angular quite yet. For extra labels on the axes, those can also be achieved through the axis annotation functionality of the chart.

[gmurray81]

please see this sample for how to use axis annotations: https://stackblitz.com/edit/angular-nclhjf-1nhyjg?file=src%2Fapp%2Fdata-chart-type-category-series%2Fdata-chart-type-category-series.component.ts

It simulates a value overlay line with a scatter line series. This will be simpler when we release value overlays.

[andreas-gross-sematell]

Thank you very much for the suggestions and the example. I will have a look at them. I think the guideline example you provided is just what we need. Thanks!

Do you have a rough estimation when the valueOverlay series will arrive? We have feature freeze at the end of june. So I would like to go for valueOverlay instead of any selfmade hack :)

Update: I just implemented your example in our application and this is exactly what we need. Thanks!!!

[gmurray81]

valueOverlay looks like it may be available sometime in June, potentially.

[gmurray81]

valueOverlay will also include built in axis annotations as a feature when it ships.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.