JSFiddle - React, Tailwind, and code Playground

by zvonem

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container2" style="width: 600px; height: 600px;"></div>

JavaScript

$(function() {
  var data = [
    [10, 100],
    [20, 150],
    [30, 200],
    [40, 250],
    [50, 300]
  ];

  var line_data = [];
  var circle_data = [];
  for (var i = 0; i < data.length; i++) {
    var xValue = data[i][1] / 2;
    var yValue = 0;
    var rValue = data[i][1] / 2;

    circle_data.push({
      x: xValue,
      y: yValue,
      r: rValue
    });
    line_data.push({
      x: xValue,
      y: rValue
    });
  }

  $('#container2').highcharts({
      title: {
        text: '',
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      tooltip: {
        enabled: true
      },
      xAxis: {
        title: {
          useHTML: true,
          text: '&sigma; (MPa)'
        },
        gridLineWidth: 1,
        min: 0,
        max: 360,
        tickInterval: 20
      },
      yAxis: {
        title: {
          useHTML: true,
          text: '&tau; (MPa)'
        },
        gridLineWidth: 1,
        min: 0,
        max: 360,
        tickInterval: 20
      },
      plotOptions: {
        line: {
          marker: {
            enabled: true
          }
        }
      },
      series: [{
        // dataset za krivulju
        type: 'line',
        name: 'o3(MPa)',
        enableMouseTracking: true,
        data: line_data,
        point: {
          events: {
            mouseOver: function() {
              $('#row_' + this.index + ' > td').css("background-color", "yellow");
            },
            mouseOut: function() {
              $('#row_' + this.index + ' > td').css("background-color", "white");
            }
          }
        }
      }, {
        // dataset za Mohrove kružnice
        visible: false,
        data: circle_data,
      }]
    },
    function(chart) {
      // crtanje Mohrovih kružnica
      for (var i = 0; i < chart.series[1].data.length; i++) {
        var point = chart.series[1].data[i];
        chart.renderer.arc(point.plotX + chart.plotLeft, point.plotY +...