JSFiddle - React, Tailwind, and code Playground
by Alagar Kamuthurai
HTML
<script src="http://highcharts.com/js/testing.js"></script>
<div id="timeline-chart" style="height: 400px"></div>
JavaScript
$(function() {
var chart1 = new Highcharts.Chart({
chart: {
defaultSeriesType: "area",
renderTo: "timeline-chart"
},
credits: {
enabled: false
},
plotOptions: {
area: {
//allowPointSelect: true,
fillOpacity: 0.25
},
series: {
lineWidth: 5,
marker: {
radius: 6,
symbol: "circle"
},
point: {
events: {
click: function() {
var x = this.x,
selected = !this.selected,
index = this.series.index;
console.log(this)
this.select(selected, false);
$.each(this.series.chart.series, function(i, serie) {
if (serie.index !== index) {
$(serie.data).each(function(j, point){
if(x === point.x)
point.select(selected, true);
});
}
});
}
}
},
pointInterval: 365 * 24 * 3600 * 1000,
pointStart: Date.UTC(1993, 0, 1),
shadow: false
}
},
series: [
{
color: "#264870",
data: [
2142224322,
2053234695,
2200115746,
2174294505,
2238798248,
2379538916,
2434009960,
2615477197.30,
2717142084,
2745055917,
1974710669,
2988836914,
...