Troubleshooting a malfunctioning Highcharts yAxis maximum setting

Question

Troubleshooting a malfunctioning Highcharts yAxis maximum setting

Can someone explain why the yAxis is still labeled up to 15 when the max value is set to 14? I've tried adjusting the startOnTick and maxPadding properties with no success.

Here's the link to the code.

$(function () {
    $('#container').highcharts({
        chart: {                
                type: 'line'
            },
            yAxis: {
                min: 0, 
                max: 14
            },
            startOnTick: true,
            maxPadding: 0.02,
            series: [                                                           
                    {name: "2013/10/10",
                    data: [5.0, 3.0, 2.5, 3.0, 3.0, 5.0]},                                                          
                    {name: "2014/01/10",
                    data: [4.0, 1.5, 2.0, 2.0, 2.0, 4.0]}                                                                                               
            ]
    });
});

javascript highcharts

Answer 1

Answer №1

To resolve the issue, it is essential to define the tickInterval. The problem may be arising because the chart is attempting to evenly distribute the 15 data points into ticks but prefers to end on an even tick value. As a possible solution, consider implementing the following code snippet:

    yAxis: {
        min: 0, 
        max: 14,
        tickInterval: 2
    },

Answer 2

To resolve the issue, it is essential to define the tickInterval. The problem may be arising because the chart is attempting to evenly distribute the 15 data points into ticks but prefers to end on an even tick value. As a possible solution, consider implementing the following code snippet:

    yAxis: {
        min: 0, 
        max: 14,
        tickInterval: 2
    },

Answer 3

Answer №2

I spent days trying to figure out this issue and ended up repeatedly searching for a solution online using Bing. While the answer here was somewhat helpful, I ultimately resolved the problem on my end by following a different example that involved setting a static tick.

Below is an excerpt showcasing a similar approach to my final outcome (though it can be made dynamic):

yAxis: {
    tickPositioner: function () {
        var positions = [0,1,2,3,4,5,6,7,8,9,10];
        return positions;
    }
},

For reference, you can view an example at:

I hope this information proves useful in solving your own dilemma.

Answer 4

I spent days trying to figure out this issue and ended up repeatedly searching for a solution online using Bing. While the answer here was somewhat helpful, I ultimately resolved the problem on my end by following a different example that involved setting a static tick.

Below is an excerpt showcasing a similar approach to my final outcome (though it can be made dynamic):

yAxis: {
    tickPositioner: function () {
        var positions = [0,1,2,3,4,5,6,7,8,9,10];
        return positions;
    }
},

For reference, you can view an example at:

I hope this information proves useful in solving your own dilemma.

Troubleshooting a malfunctioning Highcharts yAxis maximum setting

Answer №1

Answer №2

Similar questions

How can an array of file paths be transformed into a tree structure?

A guide on managing Ngb Bootstrap carousel slide with a button in Angular

What distinguishes defining a function through a prototype versus as a class property?

Performing unit testing on two services that reside in separate modules using the Jasmine testing framework

Utilizing a dictionary for comparing with an API response in order to generate an array of unique objects by eliminating duplicates

Efficiently sending data to Service Bus from an HTTP-triggered function

What is the best approach to tackle this design?

Learn how to create an animated refreshing icon in React when clicked

I am able to successfully receive accurate data in JSON format, however I am facing difficulties binding it to a jquery

ALSO, various criteria

Toggling a div updates the content of a different div

Validating URL patterns in JavaScript using Ajax

Unsynchronized Request Sequencing

Rearrange HTML list items automatically according to changes in numeric sort order

Incorporate an additional javascript document into a VueJS component

What is the most effective way to handle DOM events in Angular 8?

Is there a way to update the href attribute within the script section in vue.js?

Export data from Angular Material data table to Excel format

Pretending to determine the exact height of the body

Troubleshooting the issue of AJAX not successfully transmitting variables to PHP