Reputation: 671
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:
Zoomed in:
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
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:
Upvotes: 3