175
Views
1
Comments
OutSystems Charts 3.1.0 Multiple Y Axis

Hello,

I would like to create a multi y-axis chart in a reactive web application. I am aiming for something similar to the demo posted in other forum posts on this topic: https://www.highcharts.com/demo/highcharts/combo-multi-axes

However, with the new Charts version released, the advanced JSON has gone away in favor of other widgets to modify the charts.

Some background:

  • I am doing a time series graph of datapoints
  • The first series is a decimal and values typically ranges from 0 to 2.
  • The second series is a decimal and values typically range from 0-1000.
  • The X-axis (dates) will show a value for both series 1 and series 2.

The drastic difference of the series ranges necessitates a different y-axis

I have tried placing in another Y-Axis widget with some limited success. This DOES add another axis, but it is still on the left hand side which decreases readability. Additionally, the standard datapoint structure type does not include the ability to add which axis you want to apply the data point to. The chart renders the first y-axis values(0-2) and then cuts off. It does not display any values outside of the range of the first y-axis(0-2). For example, data within the second series with a value of 200 is not shown since it is outside of the first y-axis range. With all this in mind,  I have three questions:

  1. How can I create a line chart with a secondary axis using the new charts version?
  2. How can I place this axis on the right side of the chart (opposite the first axis)?
  3. How can I define the datapoints to apply to one axis or another?

My skill in javascript is very limited (almost non-existent) so please be gentle and descriptive if you recommend manipulation of data in that way.

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