How to set the Y-axis and Secondary Y-axis Max Dynamically from the Dataset

If you want to dynamically set the maximum values for both the primary and secondary y-axes based on your dataset, here's an easy way to do it! This guide will walk you through the JavaScript code necessary to achieve this. Using this approach, you'll be able to pull values directly from your data fields, specifically MaxA for the primary y-axis and MaxB for the secondary y-axis, to update chart limits dynamically.

Code Setup

In the footnote of your widget, you’ll place the following JavaScript code. This script references the data values for the maximum y-axis limits and applies them to the chart in real time.

<script>
var widget = document.currentScript.closest('.widget');
var widgetBody = widget.querySelector('.body');
var chartIndex = widgetBody.dataset.highchartsChart;
var chart = Highcharts.charts[chartIndex];

if (chart) {
    chart.update({
        yAxis: [{
            max: {{MaxA:1}} // Set the Primary Y-axis Max using field MaxA
        }, {
            max: {{MaxB:1}} // Set the Secondary Y-axis Max using field MaxB
        }]
    }, false);
    chart.redraw();
}
</script>

Customizing the Code

This script can be further customized to accommodate other chart settings or dynamically set values based on additional data points. Here are a few ideas for further customization:

• Additional Y-axis Settings: Adjust other yAxis properties, such as min, title.text, or labels.formatter, by adding them within the yAxis objects.
• Dynamic Thresholds or Markers: Incorporate values from your dataset to add plot bands, thresholds, or markers on the chart, signaling key data points or limits.
• Axis Colors and Line Widths: Customize the appearance of each axis by adding parameters like lineColor, lineWidth, and gridLineWidth for better visual distinction between primary and secondary y-axes.

Conclusion

By using this script, you can set the maximum values for both the primary and secondary y-axes dynamically from your dataset, making your visualizations even more responsive and data-driven. This is particularly useful when working with datasets that vary significantly, ensuring that your chart automatically adjusts to display data optimally.

With this setup, users can enjoy automated adjustments without manually updating chart configurations—making data visualization as efficient and insightful as possible!