JSFiddle - React, Tailwind, and code Playground

by eorozco

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="chartsContentDiv"></div>

CSS

svg text {
   font-family: FontAwesome;
}

JavaScript

$(function () {
    var direction = "aaa";
    
    $('#chartsContentDiv').highcharts({
		chart: {
            zoomType: 'xy',
            height: 337
        },
        title: {
            text: ''
        },
        credits: {
            enabled: false
        }, 
        xAxis: [{
            categories: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
                'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
        }],
        yAxis: [{ // Primary yAxis
        	min: 0,
            title: {
                text: 'Desempenho',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            }
        }, 
        { 	// Secondary yAxis
        	title: {
        		text: ''
        	},
        	labels: {
        	  enabled: false
        	}
        }],
        tooltip: {
            shared: true
        },
        legend: {
        	title: {
        		text:'\uf062'+'Direção: '+direction
            },
            layout: 'vertical',
            align: 'top',
            x: 60,
            verticalAlign: 'top',
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        series: [{
            name: 'Desempenho',
            type: 'column',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            //tooltip: {
            //    valueSuffix: ' mm'
            //}

        }, {
            name: 'Meta',
            type: 'line',
            data: [80.0, 80.0, 80.0, 80.0, 80.0, 80.0, 80.0, 80.0, 80.0, 80.0, 80.0, 80.0]
        	//tooltip: {
            //    valueSuffix: '°C'
            //}
        }]
    });
    
    
});