Highcharts – hide line between markers

Issue

I’m using highcharts do draw some markers, and I really need not to show the line between them. I know that I can accomplish that by dividing the series, but I would like to ask to the community if there is another way.

I have already tried lineWidth = 0, but it keeps drawing a thin line between points.

Line width

Line marker

To better exemplify, I built the following jsFiddle:

https://jsfiddle.net/L0gkwfxs/

Highcharts.chart('container', {
    chart: {
        backgroundColor: 'transparent'
    },
    credits: false,

    navigation: {
        buttonOptions: {
            theme: {
                fill: 'white',
                padding: 5,
                stroke: 'none'
            }
        }
    },

    title: {
        text: null
    },

    subtitle: {
    },

    xAxis: [{
        visible: true,
        offset: 0.1,
    },
    {
        visible: false
    }],
    plotOptions: {
        series: {
            pointWidth: -5
        }
    },

    yAxis: [{
        visible: true,
        reversed: true,
        gridLineWidth: 0,
        title: {
            text: 'MD (m)',
            style: {
                fontSize: '10px'
            }
        },
        min: 2000,
        max: 6500
    },
    {
        opposite: true,
        gridLineWidth: 0,
        title: {
            text: null,
        }
    }
    ],

    legend: {
        enabled: false
    },

    series: [
        {
            animation: {
                duration: 5000
            },            
            lineWidth: 0,
            name: 'Sensor',
            color: 'RGBA(255,0,47,0.6)',
            data: [
                [
                    2000.5,
                    5601,
                    5603
                ],                
                [
                    2000.5,
                    6815,
                    6817
                ]
            ],
            dataLabels: {
                enabled: false
            },
            marker: {
                enabled: true,
                radius: 6,
                symbol: "triangle-down"                
            },            
            enableMouseTracking: true
        }
    ]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container"></div>

Can anyone help me?

Thanks in advance!

Solution

This behaviour occurs due to lineWidthPlus option which as default adds one-pixel to the hovered line width.

plotOptions: {
    series: {
        states: {
            hover: {
                lineWidthPlus: 0
            }
        }
    }
},

Demo:
https://jsfiddle.net/BlackLabel/jonL1ymg/

API Reference:
https://api.highcharts.com/highcharts/series.line.states.hover


Another solution, which I recommend, is just using scatter series which shows only markers by default.

Demo:
https://jsfiddle.net/BlackLabel/k6Lsu2a0/

API Reference:
https://api.highcharts.com/highcharts/series.scatter

Answered By – magdalena

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published