CODEWITHSUNDEEP
highcharts
Michael Witt
Michael Witt

Reputation: 1712

Highcharts multiple series line charter, markers become invisible

I have a need with HighCharts graphs to display a line chart with 3 series and triangle markers on the same line. I have this a JSFiddle that seems to be working ok, but if the points are too close together a whole series becomes invisible.

$(function () {
$('#container').highcharts({
    title: {
        text: null
    },
    chart: {
        type: 'line',
        plotBackgroundImage: null,
        backgroundColor: 'transparent',
        width: 350,
        height: 520,
        borderWidth: 0,
        marginTop: 0,
        marginBottom: 50,
        marginLeft: 140,
    },
    legend: {
        align: 'left',
        verticalAlign: 'top',
        layout: 'vertical',
        x: 0,
        y: 20
    },
    xAxis: {
        type: 'datetime',
        lineWidth: 2,
        lineColor: "#FF0000",
        label: {
            enabled: true,
            format: "{value}"
        }
    },

    yAxis: {
        labels: {
            enabled: false
        },
        gridLineColor: '#197F07',
        title: {
            text: null
        }
    },
    plotOptions: {
        series: {
            marker: {
                radius: 8,
                symbol: "triangle"
            }
        },
        line: {
             lineWidth: 0
        }
    },

    series: [{
        data: [
            [Date.UTC(2010, 0, 1), 0],
            [Date.UTC(2010, 5, 1), 0],
            [Date.UTC(2010, 11, 1), 0]
        ],
        color: "#FF0000",
        name: 'Group 1',

    }, {
        data: [
            [Date.UTC(2010, 2, 1), 0],
            [Date.UTC(2010, 3, 1), 0],
            [Date.UTC(2010, 8, 1), 0]
        ],
        color: "#00FF00",
        name: 'Group 2'
    }, {
        data: [
            [Date.UTC(2010, 1, 1), 0],
            [Date.UTC(2010, 6, 1), 0],
            [Date.UTC(2010, 9, 1), 0],
            [Date.UTC(2011, 5, 1), 0]
        ],
        color: "#0000FF",
        name: 'Group 3'
    }]
});
});

In this case, on the jsfiddle, the green triangles are invisible unless you hover over them. If the chart width is set to 550, the green triangles become visible.

I'd like to find a way to make these visible at all times. Thanks!

Upvotes: 2

Views: 813

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

I'm not sure why this problem occurs originally, but it seems to be solved by explicitly stating enabled: true for plotOptions.series.marker. Like this:

plotOptions: {
    series: {
        marker: {
            enabled: true, // Added
            radius: 8,
            symbol: "triangle"
        }
    },
    line: {
         lineWidth: 0
    }
}

See this updated JSFiddle demonstration.

Upvotes: 3

Related Questions