JSFiddle - React, Tailwind, and code Playground

by rarteaga

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>


<div id="container" style="height: 500px; min-width: 600px"></div>

JavaScript

$(function() {	

		// create the chart
		$('#container').highcharts('StockChart', {
             
            xAxis: [{
                gridLineWidth: 0,
                title: {
                    text: 'Semanas',
                    align: 'low',
                    style: {
                        color: '#676767',
                        fontFamily: 'Tahoma',
                        fontSize: '8'
                    }
                }
            }],
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            tooltip: {
                backgroundColor: '#363636'
            },
            yAxis: [{
                gridLineWidth: 0,
                title: {
                    text: '',
                    style: {
                        color: '#676767',
                        fontFamily: 'Tahoma',
                        fontSize: '8'
                    }
                },
                height: 100,
                labels: {
                    enabled: false
                }
            }, {
                title: {
                    text: '',
                    style: {
                        color: '#676767',
                        fontFamily: 'Tahoma',
                        fontSize: '8'
                    }
                },
                top: 200,
                height: 150,
                offset: 0,
                gridLineWidth: 0,
                labels: {
                    enabled: false
                }
            }],
            
            series: [{
                name: 'Semana',
                type: 'column',
                color: '#D1E9F5',
                pointWidth: 10,
                groupPadding: 0,
                yAxis: 0,
                data: [10, 9, 9, 10, 12, 11, 9, 12, 12, 12, 9, 10],
            }, {
                name: 'Tc/Mz',
                type: 'line',
                color: '#00ACEC',
               ...