JSFiddle - React, Tailwind, and code Playground

by anikettiwari

HTML

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

<div id="container" style="min-width: 310px; max-width: 800px; height: 620px; margin: 0 auto"></div>

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'bar'
    },
    exporting: {
      enabled: false
    },
    style: {
      fontFamily: 'Lato'
    },
    title: {
      text: ' '
    },
    xAxis: {
      categories: ['Fox', 'NBC1', 'ABC2', 'CBS4', 'CBS5', 'Food', 'History', 'MTV', 'Showtime', 'Channel 10', 'Channel 11', 'Channel 12', 'Channel 13', 'Channel 14', 'Channel 15', 'Channel 16', 'Channel 17',
        'Channel 18', 'Channel 19',
        'Channel 20'
      ],
      title: {
        text: null
      },
      lineColor: '#ffffff',
      labels: {
        style: {
          fontSize: 11,
          fontWeight: 'bold',
          color: '#36152E'
        }
      },
      gridLineColor: '#ffffff',
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Spend (millions)',
        align: 'high'
      },
      labels: {
        overflow: 'justify'
      },
      gridLineColor: '#ffffff',
      lineColor: '#ffffff',
    },
    tooltip: {
    	shared: true,
      valueSuffix: ' mn',
      backgroundColor: '#ffffff',
      borderWidth: 0,
      shadow: true,
      color: '#ffffff',
      style: {
        padding: 15,
        fontWeight: 'bold',
        color: '#262626',
        fontSize: 13
      }
    },
    plotOptions: {
      bar: {
        dataLabels: {
          enabled: true
        }

      },
      series: {
        color: '#F76C83',
        lineColor: '#ffffff',
      }
    },
    legend: {
      layout: 'vertical',
      align: 'center',
      verticalAlign: 'top',
      x: -40,
      y: 80,
      floating: true,
      borderWidth: 1,
      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
      shadow: true
    },
    legend: {
      enabled: false
    },
    credits: {
      enabled: false
    },
    series: [{
      name: 'My Networks',
      type: 'spline',
      marker: {
        enabled: false
      },
      pointWidth: 10,
      borderRadius: 5,
      color: '#000000',
     ...