JSFiddle - React, Tailwind, and code Playground

by Danielle Parkinson

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; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'spline',
                width: 1100,
                height: 380,
                backgroundColor: '#fff'
            },
            title: {
                text: ' '
            },
            xAxis: {
                categories: ['Jan 2015', 'Feb 2015', 'Mar 2015', 'Apr 2015', 'May 2015', 'Jun 2015','Jul 2015', 'Aug 2015', 'Sep 2015', 'Oct 2015', 'Nov 2015', 'Dec 2015', 'Jan 2016'],
                title: {
                    text: null
                }
            },
            yAxis: {
                tickInterval: 10,
                title: {
                    text: ' ',
                style: {
                    fontWeight: 'normal'
                }
                }
            },
            tooltip: {
                valueSuffix: ' millions'
            },
            plotOptions: {
                column: {
                    dataLabels: {
                        y: 20,
                        color: '#ffffff',
                        enabled: true
                    }
                }
            },
            legend: {
            		align: 'right',
                verticalAlign: 'middle',
                layout: 'vertical',
                borderWidth: 0,
                itemStyle: {
                    fontWeight: 'normal'
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'IM&G',
                data: [70,75,70,75,70,75,70,75,70,75,70,75,70],
                dataLabels: {
                    enabled: false
                },
                color: '#00338d',
                marker: {
                    enabled: true
                }
            },{
                name: 'Banking',
                data: [75,80,75,80,75,80,75,80,75,80,75,80,75],
                color: '#005eb8',
                marker: {
                    enabled: true
        ...