Highcharts：如何突出显示yAxis值？

Question

I am trying to give highcharts yAxis values a simple highlight to at certain points. I have a value range that goes to 1 to 50, but I need to highlight 1, 30 and 50.

Is there a way to do that? (green)

my chart is bar right now but it could be column, I don`t mind

  var cidades = ["São Paulo", "Rio de Janeiro", "Belo Horizonte", "Curitiba", "Salvador", "Fortaleza", "Florianópolis"] var valoresCidades = [45, 35, 25, 15, 10, 5, 2]; $('#chartCidades').highcharts({ chart: { type: 'bar' }, title: { text: 'Pedidos por região' }, xAxis: { categories: cidades }, yAxis: { min: 0, max: 50, title: { text: 'Número de pedidos' }, plotLines: [{ value: 50, color: 'green', dashStyle: 'shortdash', width: 2, }, { value: 30, color: 'grey', dashStyle: 'shortdash', width: 2, }], stackLabels: { enabled: true, style: { fontSize: '10', fontWeight: 'lighter', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' } } }, legend: { align: 'left', x: -30, verticalAlign: 'top', y: 25, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false }, tooltip: { headerFormat: '<b>{point.x}</b><br/>', pointFormat: '{series.name}: {point.y:,.0f}<br/>' }, legend: { y: 30, verticalAlign: "top", align: "center", }, plotOptions: { column: { dataLabels: { enabled: false, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', style: { fontSize: '9', textShadow: '0 0 1px black' } } } }, colors: [ '#FF5722', '#607D8B' ], series: [{ name: 'Pedidos', data: valoresCidades }] }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-more.js"></script> <script src="http://code.highcharts.com/maps/modules/map.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="chartCidades"></div> 

Answer 1

You can add plotLines or even areas to the chart to achieve that effect. (one or many). You can use addPlotLine to any axis.

http://jsfiddle.net/aev2u0a4/

 chart.yAxis[0].addPlotLine({
                value: 500,
                color: 'red',
                width: 2,
                id: 'plot-line-1'
            });

Here is a sample based on highcharts own demo. Click the button to see the line added/removed.

hc API doc

Answer 2

It happens that you can add plotLines to the yAxis initialization options, like this:

                    plotLines: [{
                        value: 50,
                        color: 'green',
                        dashStyle: 'shortdash',
                        width: 2,
                    }, {
                        value: 30,
                        color: 'grey',
                        dashStyle: 'shortdash',
                        width: 2,
                    }],

This basically solved my problem. I have updated my original snippet.