Highcharts area chart hide graphs with one data point

Question

I have a product where our customers can choose a date range. For one of our tools, we make them an area chart with highcharts of their data.

I've noticed that when the area chart has one data point on the x axis, no graph is shown. Here's an example in JSFiddle: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/area-basic/

Code below for posterity:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        title: {
            text: 'US and USSR nuclear stockpiles'
        },
        subtitle: {
            text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">'+
                'thebulletin.metapress.com</a>'
        },
        xAxis: {
            allowDecimals: false,
            labels: {
                formatter: function() {
                    return this.value; // clean, unformatted number for year
                }
            }
        },
        yAxis: {
            title: {
                text: 'Nuclear weapon states'
            },
            labels: {
                formatter: function() {
                    return this.value / 1000 +'k';
                }
            }
        },
        tooltip: {
            pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
        },
        plotOptions: {
            area: {
                pointStart: 1940,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: 'USA',
            data: [10104 ]
        }, {
            name: 'USSR/Russia',
            data: [16000]
        }]
    });
});

The weird part about this: the chart is empty, but when you hover over the chart, you can see the data points. Is there any way to make the points visible without hovering over them? Perhaps an option that gives ticks a width?

Thanks!

wergeld wergeld · Accepted Answer · 2014-05-29T17:55:56

In your example when I remove all but the last datapoint I see what you are talking about. This is because in this example the marker was not enabled. To do this change it to true:

    plotOptions: {
        area: {
            pointStart: 1940,
            marker: {
                enabled: true, //this was false.
                symbol: 'circle',
                radius: 2,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            }
        }
    },

Highcharts area chart hide graphs with one data point

1 Answers