I have a line chart in Highchart with more than 10 series. When the chart is plotted for more that 2 months data with series marker enabled, the chart looks congested and makes no sense so I disabled series markers. When series marker is disabled, the markers in the legends also disappeared. What I want is to disable the markers only in the series and enable markers in legends. How can I achieve this? Can anybody please help me this?
Thanks,
Rocky.
You have two options:
- enable marker for whole series, but disable for each point
- use two series, one for data, one for legend and link them together by ID
Example:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
data: [],
name: 'test',
id: 'id-1',
color: 'red',
marker: {
enabled: true
}
}, {
linkedTo: 'id-1',
color: 'red',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
}]
});
you can do something like this
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
</body>
</html>
<script type="text/javascript">
$(function () {
Highcharts.Series.prototype.drawPoints = function () { };
$('#container').highcharts('StockChart', {
title: {
text: 'This is yongjing.chen test 3'
},
legend: { enabled: true, symbolWidth: 50 },
plotOptions: {
series: {
marker: {
enabled: true, radius: 6, symbol: 'square'
}
}
},
series: [{
data: [1, 171.5, 306.4, 2.2, 300, 2, 200],
name: 'CPU',
id: 'id-1',
color: 'red'
}]
});
});
</script>