42
Views
2
Comments
Adding a benchmark line to a chart
Question

Hello,


I am curious if there's an easy way of adding a benchmark/target line to a chart in OutSystems? I want to achieve something like this, where the chart is based on DB data, but the benchmark (red line) is something calculated and stored somewhere else.

I looked a bit over the highcharts docs, it seems using yAxis.plotLines would help me achieve this, but wondering if someone has a solution that doesn't imply too much customization? (maybe I'm being too picky since I already have a way of solving it :D).


Regards,
Bogdan

2023-12-19 16-46-19
Castro Vieira

Hello,

Define the Benchmark/Target Line Data : First, define the benchmark/target line data you want to add to the graphs. This can be a fixed value or a calculation based on some specific logic.

Add the Line to the Chart : Use the chart library options to add a horizontal or vertical line to the chart. For example, in Chart.js, you can use an option to add reference lines.annotation

Set the Line Appearance : Set the visual properties of the benchmark/target line, such as color, style and width, to ensure that it is clearly visible on the chart.

Refresh the Graph : Make sure you refresh the graph after adding the benchmark/target line so that it is displayed correctly.

2024-01-18 12-42-28
Bogdan Boglea

Hey Castro,


Do you have an OML with an example? And by the way, I'm interested in a horizontal benchmark line,  that will be clearly visible to users and maybe when hovering over it to display the actual value from the yAxis.

Since OutSystems Charts are using highcharts JS library, I don't know if the Charts.js is the same library, but indeed, I saw the yAxis.plotLines action from highcharts library that probably will allow me to achieve what I want.


Thanks,

Bogdan

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.