JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

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

<div id="container"></div>

CSS

#container {
    height: 400px;
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

Highcharts.SVGRenderer.prototype.symbols.cross = function (x, y, w, h) {
    return ['M', x, y, 'L', x + w, y + h, 'M', x + w, y, 'L', x, y + h, 'z'];
};

if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross;
}

function hoverSeries(series, ids) {
	ids.forEach(id => {
		series[id].setState('hover');
	});
}

Highcharts.chart('container', {
    //chart: {
    //    type: 'line'
    //},
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr']
    },
    series: [
    {name: 'triangle symbol',
        data: [29.9, {y: 71.5,marker: {enabled: false,states: {hover: {enabled: false}}}}, 
        106.4, {y: 129.25,marker: {enabled: false,states: {hover: {enabled: false}}}},],
        marker: {symbol: 'triangle'}
		}, 
    { name: 'Cross symbol',
        data: [54.4, {y: 29.9,marker: {enabled: false,states: {hover: {enabled: false}}}}, {y: 71.5,marker: {enabled: false,states: {hover: {enabled: false}}}}, 106.4],
        marker: {symbol: 'cross',fillColor: '#AAAAAA',lineColor: null,lineWidth: 2},
		point: {
			events: {
				mouseOver: function() {
					hoverSeries(this.series.chart.series, [2]);
				}
			}
			}
    }, {
		name: 'Some exception',
		data: [
    {x: 1,y: 71.5,marker: {symbol: 'circle',lineWidth: 2,fillColor: '#AAAAAA',lineColor: '#333333'},},
    {x: 2,y: 71.5,marker: {symbol: 'circle',lineWidth: 2,fillColor: '#AAAAAA',lineColor: '#333333'},},
    {x: 2,y:  29.9,marker: {symbol: 'circle',lineWidth: 2,fillColor: '#AAAAAA',lineColor: '#333333'},},
    {x: 3, y: 129.2,marker: {symbol: 'circle',lineWidth: 2,fillColor: '#AAAAAA',lineColor: '#333333'},}],
		lineWidth:0,
    colorIndex: 1,
		point: {events: {mouseOver: function() {hoverSeries(this.series.chart.series, [1]);}}}
	}]
});