JSFiddle - React, Tailwind, and code Playground
by Maycon Brito
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
var arrayPropriedades = {
id: 'container',
title: 'Análise Comparativa',
subtitle: '',
labelDados: 'moeda',
legend: {enabled: '1', },
dataLabels: '',
width: '600',
height: '450',
xAxis: 'Mês',
yAxis: 'Valor',
xAxisCategories:
['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez', 'Média'],
yAxisCategories: [],
rotacaoDataLabels: '0',
rotacaoXAxis: 0};
GraficoBarra(arrayPropriedades);
function GraficoBarra(arrayPropriedades) {
$('#container').highcharts({
chart: {
width: arrayPropriedades.width,
height: arrayPropriedades.height,
},
title: {
text: arrayPropriedades.title
},
subtitle: {
text: arrayPropriedades.subtitle
},
xAxis: {
type: arrayPropriedades.xAxis,
categories: arrayPropriedades.xAxisCategories,
labels: {
rotation: arrayPropriedades.rotacaoXAxis
}
},
yAxis: {
title: {
text: arrayPropriedades.yAxis
},
},
legend: arrayPropriedades.legend,
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: arrayPropriedades.dataLabels,
formatter: function () {
return formatterDataLabels(this, arrayPropriedades);
},
}
},
},
series: [{name:"Valor Considerado",
data:[[0,62720.90000000001],
[1,58271.51000000001],
[2,0],
[3,245802.12],
[4,0],
[5,0],
[6,0],
[7,],
[8,],
[9,],
[10,],
...