JSFiddle - React, Tailwind, and code Playground

by David Gnanasekaran C

HTML

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

<button id="export">
export
</button>
<div id="imgContainer"></div>

CSS

#container {
  min-width: 300px;
  max-width: 800px;
  height: 300px;
  margin: 1em auto;
}

JavaScript

var options = {
  exporting: {
    url: 'https://highcharts-plusdigitaleunprod.azurewebsites.net/'
  }
}

$('#export').click(function() {
  var obj = {},
    exportUrl = options.exporting.url;

  $.ajax({
    type: 'post',
    url: "https://highcharts-plusdigitaleunprod.azurewebsites.net/",
    contentType : 'application/json',
    data: // obj,
    JSON.stringify({
      "options": {
        type: "line",
        xAxis: [{
          crosshair: true,
          tickWidth: 0,
          gridLineColor: '#DEDEDE',
          gridLineWidth: 1,
          minorGridLineWidth: 1,
          categories: [
            'Jan',
            'Fev'
          ],
          labels: {
            enabled: true,
            style: {
              color: '#000000',
              fontSize: '14px'
            }
          }
        }],
        yAxis: [{
          tickWidth: 0,
          showLastLabel: false,
          showFirstLabel: false,
          gridLineColor: '#DEDEDE',
          gridLineWidth: 1,
          minorGridLineWidth: 1,
          title: {
            text: ' '
          },
          labels: {
            enabled: true,
            formatter: ''
          },
          style: {
            color: '#000000',
            fontSize: '14px'
          }
        }],
        series: [{
            name: 'PERIODODESCONSIDERADO',
            color: 'rgba(255,255,255,0)',
            showInLegend: false,
            type: 'line',
            yAxis: 0,
            data: [{
                y: null,
                marker: {
                  symbol: 'circle',
                  lineColor: '#ffffff',
                  lineWidth: 1,
                  radius: 3,
                  states: {
                    hover: {
                      radius: 3,
                      lineWidth: 2
                    }
                  }
                },
                dataLabels: {
                  enabled: false,
                  style: {
                    fontSize: '18px'
                  }
    ...