Guide to configuring a function to display the maximum value on a boxplot in Highcharts

Question

Guide to configuring a function to display the maximum value on a boxplot in Highcharts

I'm currently using Angular in combination with the highcharts boxplot API. While I am aware that I can manually set the max value of the y-axis in the chart configuration, such as:

max: 100,
tickInterval: 10.

There's now a need for me to dynamically adjust the max value based on the return value. For instance, if the maximum return value is approximately 60%, then the max should be set to 60.

max: 60,
tickInterval: 10.

Is there a way to incorporate a method or function to accommodate the maximum return value? Something along the lines of:

max: function(){ xxxx; return A },
tickInterval: 10

The aforementioned function serves as a custom method to verify the maximum value from the API. Once validated, it returns the updated value to the chart configuration for setting the max.

javascript angular typescript highcharts boxplot

Answer 1

Answer №1

To customize and set the yAxis.max values using chart.events.load, refer to the following links: https://api.highcharts.com/highcharts/chart.events.load https://api.highcharts.com/class-reference/Highcharts.Chart#update

Check out this demo for implementation examples: https://stackblitz.com/edit/highcharts-angular-basic-line-wtoktb

chart: {
  events: {
    load: function() {
      const chart = this;
      chart.update({
        yAxis: {
          max: (chart.yAxis[0] as any).dataMax
        }
      })
    }
  }
}

Answer 2

To customize and set the yAxis.max values using chart.events.load, refer to the following links: https://api.highcharts.com/highcharts/chart.events.load https://api.highcharts.com/class-reference/Highcharts.Chart#update

Check out this demo for implementation examples: https://stackblitz.com/edit/highcharts-angular-basic-line-wtoktb

chart: {
  events: {
    load: function() {
      const chart = this;
      chart.update({
        yAxis: {
          max: (chart.yAxis[0] as any).dataMax
        }
      })
    }
  }
}

Guide to configuring a function to display the maximum value on a boxplot in Highcharts

Answer №1

Similar questions

Transforming the response.render method in Express to be a promise-enabled

Creating a JSON-based verification system for a login page

Ways to hide the value from being shown

Transforming Lapton images into JPEG format on the fly

What could be causing this error to occur in my JavaScript React code?

Combining CodeIgniter4 with Vue.js and Webpack's devServer to handle CORS issues

Combine es6 imports from the identical module using an Eslint rule or plugin

Sharing data between view and controller in Laravel: a guide

Another project cannot import the library that was constructed

Sending a Javascript object to PHP for decoding as JSON can be accomplished by

The Order ID field in the Serenity-Platform's Order Details tab is not registering orders

What causes an ObjectUnsubscribedError to be triggered when removing and then re-adding a child component in Angular?

Offset the CDK Menu

Mastering Typescript lookup types - effectively limit the properties included in a merge operation with the Partial type

Testing HTTP requests on a form click in Vue.js 2 - Let's see how

Encountered an error while attempting to load resource in Node.js

Syntax for chained arrow functions

Unable to execute context function in React due to an issue

The art of masonry is not effective

The output from the NodeJS storage module function