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

forwarding within afterCallback employing nextjs-auth0

What is the method for showing a JavaScript variable in a popup window?

Building interactive web forms with real-time validation using CodeIgniter

"Emphasize menu items with an underline as you navigate through the

The Angular Component I've created is displaying a single set of data on each mat-tab screen

What could be causing the data storage issue in the state?

Create a basic single page application with Node.js and Express

Troubleshooting the Timepicker import issue in ant design version 5.0.3

Disassociate all globally linked modules in npm network

Error: Unable to retrieve the value as the property is null

Are cookies with the http_only attribute included in requests made through AJAX?

Change the ddmmyy date string to dd/mm/yyyy format using TypeScript

Angular Testing: Discovering the best practices for asserting expectations post function execution

Discovering the initial vacant row within an HTML table with Javascript

What is the significance of the "component" prop within MUI components?

Is there a way for me to either fulfill a promise or face failure?

What is the process for designing a type that accepts an object and provides an updated version?

Select all elements using jQuery that have an id attribute and belong to a specific class

A guide on combining two native Record types in TypeScript

Is there a way to ensure that @angular/core is utilizing the most up-to-date version of zone.js in its peerDependencies configuration?