JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<script src="https://code.highcharts.com/highcharts.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, id) {
  series[id].setState('hover');
}

//const disabledMarker = {
//  enabled: false,
//  states: {
//    hover: {
//      enabled: false
//    }
//  }
//};

Highcharts.chart('container', {
  xAxis: {

        labels: {
            enabled: false
        }
    },
    chart: {
        type: 'line',
        width: 150,
        height: 150
    },
     title:{
        text:''
    },
    yAxis: {
				plotLines: [{
        value: 0,
        width: 1,
        color: '#aaa',
        zIndex: 0
      }],
        lineColor:'#999',
        gridLineWidth: 0,
        lineWidth:1,
        labels: {
            enabled: false
        },
        title: {
            enabled: false
        }
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
        lineWidth: 5,
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: false
                    }
                }
            }
        }
    },
  series: [{
    name: 'triangle symbol',
    data: [29.9, {
      y: -71.5,
      //marker: disabledMarker
    }, 106.4, {
      y: -129.25,
      //marker: disabledMarker
    }, ],
   
  }, {
    name: 'Cross symbol',
    data: [54.4, {
      y: -29.9,
     // marker: disabledMarker
    }, {
      y:- 71.5,
      //marker: disabledMarker
    }, 106.4],
   
  }, ]
});