CODEWITHSUNDEEP
highcharts
dhrm
dhrm

Reputation: 14934

HighCharts: add dashed line

I've this HighCharts:

$('#container').highcharts({
    chart: {
        type: 'scatter'
    },
    title: {
        text: 'Title'
    },
    plotOptions: {
        scatter: {
            dataLabels: {
                enabled: true,
                formatter: function() {
                    return this.point.value;
                }
            }
        }
    },
    series: [
            {
                name: 'Points',
                data: [
                    { x: 10, y: 25, value: 96.1 },
                    { x: 50, y: 25, value: 96.3 },
                    { x: 10, y: 50, value: 96.0 },
                    { x: 50, y: 50, value: 96.3 },
                    { x: 90, y: 50, value: 96.4 },
                    { x: 100, y: 50, value: 96.5 },
                    { x: 10, y: 100, value: 96.1 },
                    { x: 50, y: 100, value: 96.3 },
                    { x: 100, y: 100, value: 96.6 }
                ]
            }
        ]
});

I would like to mark the 90/100 point with a dashed line. How can I do that?

enter image description here

See my JSFiddle.

Upvotes: 0

Views: 3118

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

I would use scatter series with enabled line: http://jsfiddle.net/6x6s09d8/4/

{
    data: [
        [90, 20],
        [90, 100],
        [10, 100]
    ],            
    lineWidth: 2,
    dashStyle: 'Dash',
    lineColor: 'black',
    type: 'scatter',
    marker: {
        enabled: false  
    },
    showInLegend: false,
    enableMouseTracking: false
}

Only limitation now is to set minPadding: 0 for both Axes.

Upvotes: 2

Related Questions