in high charts unable to set y axis to 100

Question

i have configure one high chart graph ,where im showing the data in the perentage show i want to set the y axis to 100. but its already set to 150. need to change 100 from the 150 y axis value. code

var chart = Highcharts.chart('container', {

    title: {
        text: 'Bins Status'
    },
    subtitle: {
        text: 'Filled %'
    },
    xAxis: {
        categories: ['Bin1', 'Bin2', 'Bin3', 'Bin4', 'Bin5', 'Bin6', 'Bin7', 'Bin8', 'Bin9', 'Bin10']
    },
    series: [{
        type: 'column',
        colorByPoint: false,
        data: [22.3, 42.3, 96.4, 29.2, 44.0, 76.0, 35.6, 48.5, 16.4, 92.3],
        showInLegend: false
    }],
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y:.1f}%'
            }
        }
    },
}, function(chart) {
    $.each(chart.series[0].data, function (i, data) {
        if (data.y >= 70)
            data.update({
                color: 'yellow'
            });
        if (data.y >= 90)
            data.update({
                color: 'red'
                });

    })
});

jsfiddle link https://jsfiddle.net/fzumnvs5/

Possible duplicate of [How to set Highcharts chart maximum yAxis value](https://stackoverflow.com/questions/6847244/how-to-set-highcharts-chart-maximum-yaxis-value) — ewolden, Dec 15 '17 at 10:24
Whoever rated the answer down, post a valid reason in the comment. It's amusing how the answer is just been rated down without a valid reason or feedback. This isn't giving you any positive reputation either. — , Dec 15 '17 at 10:35

score 0 · Accepted Answer · 2017-12-15T10:31:58.223

Add this simple code, yAxis: {min: 0, max: 100},

https://jsfiddle.net/2e7b3f4f/

Refer the fiddle as the you can't really see the color changes on the snippet.

var chart = Highcharts.chart('container', {

    title: {
        text: 'Bins Status'
    },
    subtitle: {
        text: 'Filled %'
    },
    xAxis: {
        categories: ['Bin1', 'Bin2', 'Bin3', 'Bin4', 'Bin5', 'Bin6', 'Bin7', 'Bin8', 'Bin9', 'Bin10']
    },
    yAxis: {min: 0, max: 100},
    series: [{
        type: 'column',
        colorByPoint: false,
        data: [22.3, 42.3, 96.4, 29.2, 44.0, 76.0, 35.6, 48.5, 16.4, 92.3],
        showInLegend: false
    }],
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y:.1f}%'
            }
        }
    },
}, function(chart) {
    $.each(chart.series[0].data, function (i, data) {
        if (data.y >= 70)
            data.update({
                color: 'yellow'
            });
        if (data.y >= 90)
            data.update({
                color: 'red'
                });

    })
});

$('#plain').click(function() {
    chart.update({
        chart: {
            inverted: false,
            polar: false
        },
        subtitle: {
            text: 'Plain'
        }
    });
});

$('#inverted').click(function() {
    chart.update({
        chart: {
            inverted: true,
            polar: false
        },
        subtitle: {
            text: 'inverted'
        }
    });
});

$('#polar').click(function() {
    chart.update({
        chart: {
            inverted: false,
            polar: true
        },
        subtitle: {
            text: 'Polar'
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.3/css/highcharts.css">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="container" class="col-sm-6" style="height:300px;padding-right:0px;">
  </div>
 <div class="col-sm-6">
        <button id="plain">Plain</button>
     <button id="inverted">Inverted</button>
     <button id="polar">Polar</button>
 </div>

in high charts unable to set y axis to 100

1 Answers1