试图在图表上绘制虚线

Question

Hey Guys I'm trying to draw dotted lines over my highcharts chart but when I try this the lines either push the chart out of position or skip over the chart and continue past it.I'm also trying to put labels on the top of each barchart too

here's my code

$(function () {
        $('#container5').highcharts({
            chart: {
                type: 'column'

            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            tooltip: { enabled: false },
            exporting: {
                   enabled:false
                },

             credits: {
                  enabled: false
              },

              legend: {
                  enabled:false
              },
            xAxis: {
                 labels:
                    {
                      enabled: false
                    },
                    lineColor: 'transparent',
                     minorTickLength: 0,
                       tickLength: 0,
                       min: 0,
                          lineWidth: 0,
                   minorGridLineWidth: 0,
                   lineColor: 'transparent',

                      gridLineColor: 'transparent',
                        title: {
                            text: ''
                        },
                categories: ['']
            },
            yAxis: {
                 labels:
                    {
                      enabled: false
                    },
                    lineColor: 'transparent',
                     minorTickLength: 0,
                       tickLength: 0,
                       min: 0,
                          lineWidth: 0,
                   minorGridLineWidth: 0,
                   lineColor: 'transparent',


                      gridLineColor: 'transparent',
                        title: {
                            text: ''
                        },
                min: 0,
                title: {
                    text: ' '
                },

            },


            plotOptions: {
                column: {
                    stacking: 'normal',
                     animation: false

                },
                series: {
                    states: {
                        hover: {
                            enabled: false
                        }
                    }
                }
            },

            series: [{
                name: '10',
                data: [10],
                 pointWidth: 50,
                 groupPadding: 0,
                 color: '#f7a35c'
            }, {
                name: '12',
                data: [12],
                pointWidth: 50,
                groupPadding: 0,
                color: '#004A98'
            }, {
                name: '12',
                data: [12],
                pointWidth: 50,
                groupPadding: 0,
                color: '#509ADC'
            }]
        });
    });

and

<div class="col-md-2" id="container5" style="width: 200px; height: 700px; margin:auto"></div>

It looks like

Picture one

but I want it to look like this

Picture two

Answer 1

Deffine your plot lines on YAxis like this. Demo

yAxis: {
     title: {
         ...
     },
     plotLines: [{
         value: minValue,
         color: 'green',
         dashStyle: 'shortdash',
         width: 2,
         label: {
             text: 'Last quarter minimum'
         }
     }, {
         value: maxValue,
         color: 'red',
         dashStyle: 'shortdash',
         width: 2,
         label: {
             text: 'Last quarter maximum'
         }
     }]
 }

EDIT

In addition to, if you want to align the plotLines to the left you can try this:

Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
    return ['M',x*2,y + height,'L',0,y + width];
};

DEMO

Answer 2

You can use Renderer.path to add custom line in the chart.

chart.renderer.path(['M', 0, 0, 'L', 100, 100])
    .attr({
        'stroke-width': 2,
        stroke: 'red'
    })
    .add();