Home/ Questions/Q 6933565
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T11:50:55+00:00

Where are the starting numbers and increment value for the primary and secondary y

  • 0

Where are the starting numbers and increment value for the primary and secondary y axis? Why do they start at 5 and 0 and increment at the numbers they are? I want to create labels that go at certain intervals not the ones in this code. I just can’t figure out where to change it.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>


        <!-- 1. Add these JavaScript inclusions in the head of your page -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript" src="../js/highcharts.js"></script>

        <!-- 1a) Optional: add a theme file -->
        <!--
            <script type="text/javascript" src="../js/themes/gray.js"></script>
        -->

        <!-- 1b) Optional: the exporting module -->
        <script type="text/javascript" src="../js/modules/exporting.js"></script>


        <!-- 2. Add the JavaScript to initialize the chart on document ready -->
        <script type="text/javascript">

            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        zoomType: 'xy'
                    },
                    title: {
                        text: 'Average Monthly Temperature and Rainfall in Tokyo'
                    },
                    subtitle: {
                        text: 'Source: WorldClimate.com'
                    },
                    xAxis: [{
                        categories: ['0','50', '100', '150', '200', '250', '300', 
                            '350', '400', '450', '500']
                    }],
                    yAxis: [{ // Primary yAxis
                        labels: {
                            formatter: function() {
                                return this.value + 100+ '°C';
                            },
                            style: {
                                color: '#89A54E'
                            }
                        },
                        title: {
                            text: 'Temperature',
                            style: {
                                color: '#89A54E'
                            }
                        }
                    }, { // Secondary yAxis
                        title: {
                            text: 'Rainfall',
                            style: {
                                color: '#4572A7'
                            }
                        },
                        labels: {
                            formatter: function() {
                                return this.value +' mm';
                            },
                            style: {
                                color: '#4572A7'
                            }
                        },
                        opposite: true
                    }],
                    tooltip: {
                        formatter: function() {
                            return ''+
                                this.x +': '+ this.y +
                                (this.series.name == 'Rainfall' ? ' mm' : '°C');
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'left',
                        x: 120,
                        verticalAlign: 'top',
                        y: 100,
                        floating: true,
                        backgroundColor: '#FFFFFF'
                    },
                    series: [{
                        name: 'Rainfall',
                        color: '#4572A7',
                        type: 'column',
                        yAxis: 1,
                        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1]      

                    }, {
                        name: 'Temperature',
                        color: '#89A54E',
                        type: 'spline',
                        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9]
                    }]
                });


            });

        </script>

    </head>
    <body>

        <!-- 3. Add the container -->
        <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>


    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try using yAxis.min and yAxis.max, from the reference: http://www.highcharts.com/ref/#yAxis–max.

    For example,

    max: 125

    jsFiddle here: http://jsfiddle.net/Wax78/

    (Note that in your example, the main yAxis of Temperature has +100 added to it.)

    • 0