Highcharts repeating same label value on Y Axis

0
votes

I have a Highcharts line graph where the Y Axis labels aren't showing the decimal place for large numbers. If the values are over 5 digits then the decimal places fail to show which means all the labels show the same value.

I know I could define a custom formatter to show the decimal places but the chart is very dynamic and can show lines with widely varying values. Some series can have just integers and some need up to 5 decimal places. I don't want to have to search through the series and pass back the max and min just to scale the axis correctly after loading a new series. The charts usually autoscale and show the correct labels so what is wrong here? Here is a cut down example of the problem: JSFiddle

The Y Axis has a prety basic definiition;

        yAxis: {
        max: 33999.253,
        min: 33999.219,
        title: {
            text: 'm',
            style: {
                color: '#000000',
                fontWeight: 'bold'
            }
        },
        labels: {
            style: {
                color: '#000000'
            }
        }
    },

As you can see when initially shown all the Y Axis labels are the same. Yet when you update the series (using the dataSet button) and show a different data series with much lower values the decimal places are shown. The label don't even show when you scale the axis (using the autoscale button).

Is this a problem caused by the margin spacing or is there some other configuration setting I'm missing?

2
javascriptjqueryhighcharts

2 Answers

1
votes

there is a simple solution for this,

use your own formatter for labels

            yAxis: {
                max: 33999.253,
                min: 33999.219,
                title: {
                    text: 'm',
                    style: {
                        color: '#000000',
                        fontWeight: 'bold'
                    }
                },
                labels: {
                    style: {
                        color: '#000000'
                    },
                    formatter: function () {
                        return this.value
                    }
                }
            },

updated your fiddle here: http://jsfiddle.net/NZjUg/5/

1
votes

By default Highcharts will round labels to two decimals. You can change that using yAxis.labels.formatter. See: 

        yAxis: {
            max: 33999.253,
            min: 33999.219,
            title: {
                text: 'm',
                style: {
                    color: '#000000',
                    fontWeight: 'bold'
                }
            },
            labels: {
                formatter: function() {
                    return this.value;
                },
                style: {
                    color: '#000000'
                }
            }
        },

And demo: http://jsfiddle.net/NZjUg/4/