How to make Column type series Secondary yAxis values dynamic and not always start with 0?

Question

Refer this jsfiddle link first:

Here, In this above example the spline type series (Series 2) primary yAxis (left side) doesn't start with 0% it takes the dynamic value based on the series data range.

The same thing I want in the column type series (Series 2) Secondary yAxis (right side) i.e. instead of staring with $0, it should start with some dynamic value based on the series data range.

** The main reason is to make the minute change in the values for Series 2 to be differentiated properly in the chart view. I mean for minute changes in value of Series 2, the column height looks kind of equal on chart view.

When I change the type for Series 2 from column to spline, it works. So does it means we can't have yAxis dynamic plotting for column series and it will always start with 0 value ??

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

    <div id="container"></div>

JS:

Highcharts.chart('container', {
    chart: {
            height: 298,
      marginTop: 33
    },
    xAxis: {
        categories: [
                    "Current",
                    "30 Days",
                    "60 Days",
                    "90 Days"
                        ],
    },
    yAxis: [{
                labels: {
                    format: '{value:,.1f}%'
                }
            }, { // Secondary yAxis
                labels: {
                    format: '$' + '{value:,.0f}'
                },
                opposite: true
            }],
    series: [{"name":"Series 1",
              "data":[95.19,95.93,95.93,95.93],
              "type":"spline",
              "color":"#88CB11",
              "yAxis":0},
              {"name":"Series 2",
              "data":[601.02,603.81,600.31,599.9],
              "type":"column",
              "color":"#4472C4",
              "yAxis":1}]
});

HighChart Screenshot

I am not sure if I understood your requirement, but you can change this value by setting yAxis.min: api.highcharts.com/highcharts/yAxis.min — Sebastian Wędzel
@Sebastian - Refer this: jsfiddle.net/sq7n69dh/17 - Here for Series 2 of type column, I don't want the secondary yAxis to start with $0, instead I want the plotting to be dynamic, the same way its happening with Series 1 yAxis (starting with 95.1%, not with 0%) for the given series "data":[95.19,95.93,95.93,95.93]. Hence, I want the yAxis for Series 2 of type column to start with 598 or something for series "data":[601.02,603.81,600.31,599.9]. Also based on different data range the plotting on yAxis should change and not start with 0 value always. — J.Bhardwaj

Sebastian Wędzel Sebastian Wędzel · Accepted Answer · 2020-07-30T08:39:51

According to the comments (thanks for the clarification) - I think that the best solution for this case will be finding the smallest value in the series and set it as a yAxis.min in the load callback.

Demo: https://jsfiddle.net/BlackLabel/w2yq4bcn/

events: {
  load() {
    let chart = this,
      lowestValue;

    lowestValue = chart.series[1].points.sort((a, b) => a.y - b.y)

    chart.yAxis[1].update({
      min: lowestValue[0].y
    })
  }
}

API: https://api.highcharts.com/highcharts/chart.events.load

API: https://api.highcharts.com/class-reference/Highcharts.Axis#update

How to make Column type series Secondary yAxis values dynamic and not always start with 0?

1 Answers