JSFiddle - React, Tailwind, and code Playground

by Raul Corona Xolaltenco

HTML

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

<div id="MyDiv"style="width: 50px"></div>
<div id="tmp"></div>

JavaScript

function incializaGraficaBarras(id){

  var options = {
          chart: {
             renderTo: id,
              type: 'area',
               width:505,
          		height:270
          },
          title: {
              text: 'Julio 2015 a Junio 2016'
          },

          xAxis: {
              categories: ['Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic', 'Ene', 'Feb', 'Mar', 'Apl', 'May', 'Jun'],
              tickmarkPlacement: 'on',
              title: {
                  enabled: false
              }
          },
          yAxis: {

          },
          tooltip: {
              pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
              shared: true
          },
          plotOptions: {
              area: {

                  lineColor: '#ffffff',
                  lineWidth: 1,
                  marker: {
                      lineWidth: 1,
                      lineColor: '#ffffff'
                  }
              }
          },
          series: [{
              name: 'Contrat 1',
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }, {
              name: 'Contrato 2',
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
              name: 'Contrato 3',
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }]
      };
		eval(id+'=new Highcharts.Chart(options)');


}

//Se inicializa la grafica
incializaGraficaBarras("MyDiv");