CODEWITHSUNDEEP
javascripthighchartspoints
PetyoKostakov
PetyoKostakov

Reputation: 21

HighCharts missing data points on line chart

I'm using highcharts to plot data and on some data series there are no data points like on image bellow and the jsFiddle example. Before I log a issue on github I want to ask you if there are something that I miss or it id really an issue.

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Javascript

$(function () {
    $('#container').highcharts({
        chart: {
                type: 'line',
                animation: false
            },
            title: {
                text: "abc"
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: { // don't display the dummy year
                    month: '%e. %b',
                    year: '%b'
                }
            },
            yAxis: {
                title: {
                    text: 'Time [ms]'

                },
                labels: {
                    step: 1
                },
                tickInterval: 100,
                minRange: 400
                //range: 200
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true,
                        allowOverlap: true,
                        borderWidth: 2,
                        style: {
                            textShadow: false
                        },
                        padding: 2.5
                    },
                    //selected: true,
                    enableMouseTracking: true,
                    animation: false,
                    allowPointSelect: true,
                    /*stacking: 'percent'*/
                },

            },
        series: [{
        "name": "a",
        "data": [[1458604800000, 1800], [1458691200000, 1600], [1458777600000, 1800], [1458864000000, 1800], [1459123200000, 1800], [1459209600000, 1800]],
        "color": "rgba(91,155,213,1)",
        "dataLabels": {"color": "rgba(91,155,213,1)", "y": 0},
        "_symbolIndex": 0
    }, {
        "name": "b",
        "data": [[1458604800000, 1500], [1458691200000, 1500], [1458864000000, 1500], [1459123200000, 1500], [1459209600000, 1500]],
        "color": "rgba(165,165,165,1)",
        "dataLabels": {"color": "rgba(165,165,165,1)", "y": 24},
        "_symbolIndex": 1
    }, {
        "name": "c",
        "data": [[1458604800000, 1400], [1458691200000, 1300], [1458777600000, 1300], [1459123200000, 1100], [1459123200000, 1100], [1459209600000, 1100]],
        "color": "rgba(237,125,49,1)",
        "dataLabels": {"color": "rgba(237,125,49,1)", "y": 0},
        "_symbolIndex": 2
    }]
    });
});

var seriesToReproduce = [{"name":"a","data":[[1458604800000,1800],[1458691200000,1700],[1458777600000,1700],[1458864000000,1700],[1459123200000,1700],[1459209600000,1700]],"color":"rgba(237,125,49,1)","dataLabels":{"color":"rgba(237,125,49,1)","y":0},"_symbolIndex":0},{"name":"b","data":[[1458604800000,2100],[1458691200000,2000],[1458864000000,2100],[1459123200000,2000],[1459123200000,2000],[1459209600000,2000]],"color":"rgba(165,165,165,1)","dataLabels":{"color":"rgba(165,165,165,1)","y":24},"_symbolIndex":1},{"name":"c","data":[[1458604800000,2300],[1458691200000,2200],[1458777600000,2200],[1458864000000,2200],[1459123200000,2200],[1459209600000,2200]],"color":"rgba(91,155,213,1)","dataLabels":{"color":"rgba(91,155,213,1)","y":0},"_symbolIndex":2}]

DEMO

No data points screenshot: https://i.sstatic.net/NS8Rl.png

Thanks!

Upvotes: 1

Views: 1034

Answers (2)

XAVIER K.I
XAVIER K.I

Reputation: 349

updated Plunk

In highcharts APi there is an option for enabling Markers link,

use 

plotOptions: {
        series: {
            marker: {
                enabled: true

            }
        }
    },

for enabling markers in your series ,

Upvotes: 3

Loufylouf
Loufylouf

Reputation: 699

You have to dig into the documentation for the marker attribute of series to find that there is an enabled property, and it says :

enabled: Boolean

Enable or disable the point marker. If null, the markers are hidden when the data is > dense, and shown for more widespread data points. Defaults to null.

So I don't know how they determine that the data is dense or not, but if you want the markers to be always displayed, you should set the enabled property to true.

Upvotes: 4

Related Questions