JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
JavaScript
$(function () {
var current_zafra_series = new Array();
current_zafra_series[0] = { y: 150, prueba: 'a', marker: { fillColor: '#FF9933' } }; current_zafra_series[1] = { y: 200, prueba: 'b', marker: { fillColor: '#F15B49' } };
current_zafra_series[2] = { y: 150, prueba: 'c', marker: { fillColor: '#55B647' } };
max_lenth = current_zafra_series.length;
var chart = new Highcharts.Chart({
chart: {
marginBottom: 1,
marginLeft: 0,
marginRight: 0,
renderTo: 'container',
type: 'spline'
},
credits: {
enabled: false
},
title: {
text: ''
},
tooltip: {
formatter: function () {
return '<b>'+ this.point.prueba + '</b>' + ": " + this.y;
},
borderColor: null
},
xAxis: {
categories: 'a',
max: max_lenth+ 0.4,
lineColor: '#CBCBCB',
lineWidth: 1
},
yAxis: {
min: 0,
gridLineWidth: 0,
endOnTick: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
},
series: [{
data: current_zafra_series,
color: '#2D9ED8',
marker: {
lineWidth: 3,
radius: 5.5,
},
shadow: false
}]
...