在高位图中无法将y轴设置为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/

Answer 1

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>