James Tordoff
James Tordoff

Reputation: 671

Highcharts spline chart points not showing unless zoomed in

I am new to Highcharts and I am currently writing some charts and have run into an issue.

The markers for each point in the graph are invisible until the chart is zoomed into just 1 or 2 days, and even then the points are very small.

I think that it is worth noting that there will usually multiple points per day on my graphs, so there could be hundreds on one graph when not zoomed.

Not zoomed in:

enter image description here

Zoomed in:

enter image description here

My Question is how can I make the points slightly larger, and more importantly show when not zoomed in?

I have tried to change the marker size but all that seems to do is enlarge them once you are zoomed in or on hover. Here is how i attempted to make the marker show without zoom:

  plotOptions: {
    series: { 
      marker: {
        radius:10, 
      },
     },
   },`

Here is a snippet which, shows how the points only show on zoom:

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {

    Highcharts.chart('container', {
        chart: {
            zoomType: 'x'
        },
        title: {
            text: null
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            title: {
                text: 'Exchange rate'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                marker: {
                    radius: 2
                },
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },

        series: [{
            type: 'area',
            name: 'USD to EUR',
            data: data
        }]
    });
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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>

Any help is appreciated.

Thanks.

Upvotes: 4

Views: 1884

Answers (1)

James Tordoff
James Tordoff

Reputation: 671

After continuing to search for answers I have found what I was missing.

I was missing the Series options within my plotOptions which should have been enclosing the marker options.

I added the following code and got my desired output.

Code:

plotOptions: {
  series: {
    marker: {
     enabled: true,
        radius: 2
    }
  }
}

Outcome:

enter image description here

Upvotes: 3

Related Questions