JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<link rel="stylesheet" href="https://blacklabel.github.io/projections/css/styles.css">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://blacklabel.github.io/projections/js/projections.js"></script>
<div id="chart-3d"></div>

<svg style="height: 0px;">
  <defs>
    <radialGradient cx="0.4" cy="0.3" r="0.5" id="gradient-0">
      <stop offset="0" stop-color="rgb(195,195,255)" stop-opacity="1"></stop>
      <stop offset="1" stop-color="rgb(0,0,255)" stop-opacity="1"></stop>
    </radialGradient>
    <radialGradient cx="0.4" cy="0.3" r="0.5" id="gradient-1">
      <stop offset="0" stop-color="rgb(255,255,255)" stop-opacity="1"></stop>
      <stop offset="1" stop-color="rgb(255,255,0)" stop-opacity="1"></stop>
    </radialGradient>
    <radialGradient cx="0.4" cy="0.3" r="0.5" id="gradient-2">
      <stop offset="0" stop-color="rgb(159,159,255)" stop-opacity="1"></stop>
      <stop offset="1" stop-color="rgb(159,159,0)" stop-opacity="1"></stop>
    </radialGradient>
  </defs>
</svg>
<button class="btn">
  live chart
</button>

JavaScript

$(function() {

  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'chart-3d',
      type: 'scatter',
      options3d: {
        enabled: true,
        alpha: 10,
        beta: 50,
        depth: 450,
        viewDistance: 5,
        fitToPlot: false,
        frame: {
          bottom: {
            size: 1,
            color: 'rgba(0,0,0,0.2)'
          },
          back: {
            size: 1,
            color: 'rgba(0,0,0,0.2)'
          },
          side: {
            size: 1,
            color: 'rgba(0,0,0,0.2)'
          }
        }
      }
    },
    title: {
      useHTML: true,
      x: -12,
      y: 10,
      text: '<span class="chart-title">Projections<span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>'
    },
    plotOptions: {
      scatter: {
        width: 10,
        height: 10,
        depth: 10
      }
    },
    tooltip: {
      formatter: function() {
        return this.point.name;
      }
    },
    yAxis: {
      min: 0,
      max: 10,
      title: null,
      gridLineWidth: 1
    },
    xAxis: {
      min: 0,
      max: 10,
      gridLineWidth: 1
    },
    legend: {
      enabled: false
    },
    zAxis: {
      min: 0,
      max: 10,
      showFirstLabel: false,
      gridLineWidth: 1
    },
    plotOptions: {
      series: {
        states: {
          hover: {
            halo: false
          }
        }
      }
    },
    series: [{
      name: 'Solar System',
      animation: {
        duration: 10
      },
      planeProjection: {
        enabled: true,
        byPoint: true
      },
      lineProjection: {
        enabled: true,
        colorByPoint: true
      },
      marker: {
        radius: 13,
        symbol: 'circle',
        fillColor: {
          radialGradient: {
            cx: 0.4,
            cy: 0.3,
            r: 0.5
          },
          stops: [
            [0,...