JSFiddle - React, Tailwind, and code Playground

by anikettiwari

HTML

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

<div id="container" style="width: 600px; height: 250px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    backgroundColor: 'white',
    events: {
      load: function() {

        // Draw the flow chart
        var ren = this.renderer,
          colors = Highcharts.getOptions().colors;

        ren.rect(50, 82, 100, 80, 0)
          .attr({
            fill: colors[0],
            stroke: 'white',
            'stroke-width': 2,
            padding: 5,
            r: 5
          })
          .add();

        // SaaS client label
        ren.text('SaaS client<br/>(browser or<br/>script)', 100, 110)
          .attr({
            zIndex: 2,
            align: 'center'
          })
          .css({
            color: 'white'
          })
          .add()
      //    .shadow(true);

        // Browser label
        ren.label('Browser<br/>running<br/>Highcharts', 250, 82)
          .attr({
            fill: colors[3],
            stroke: 'white',
            'stroke-width': 2,
            padding: 5,
            r: 5
          })
          .css({
            color: 'white',
            width: '100px'
          })
          .add()
          .shadow(true);
      }
    }
  },
  title: {
    text: 'Highcharts export server overview',
    style: {
      color: 'black'
    }
  }
});