JSFiddle - React, Tailwind, and code Playground

by fxi

JavaScript

/** 
 * Add functions to handle dashboard events
 * onAdd = Action to exectute when the widget is added to the DOM
 * onRemove = Action to execute when the widget is removed
 * onData = Action to execute when data is updated. Data is available with this.data 
 */
return {
  onAdd: function() {
    var widget = this;
    mx.helpers.getCSV({
      url: "http://geodev.grid.unep.ch/extras/graph_co2_concentration.csv",
      onSuccess: function(data) {
          
          var Highcharts = widget.modules.highcharts;
          
          var chart = Highcharts.Chart(widget.elContent,{
            chart: {
              type: "spline",
              marginLeft: 40,
              marginBottom: 60,
              marginTop: 100,
              height: (9 / 16 * 100) + "%"
            },
            title: {
              text: "Trends in Atmospheric Carbon Dioxide Concentration",
              align: "center",
              y: 20,
              style: {
                fontSize: "28px",
                color: "black"
              }
            },
            subtitle: {
              text: "Monthly and annual mean carbon dioxide concentrations globally averaged over marine surface sites",
              align: "center",
              style: {
                fontSize: "15px",
                color: "#666666"
              }
            },
            xAxis: {
              type: "datetime",
              tickLength: 0,
              showLastLabel: true,
              //tickInterval: 10,
              labels: {
                formatter: function() {
                  return Highcharts.dateFormat('%Y', this.value);
                },
                pointInterval: 24 * 3600 * 1000 * 365,
                step: 1,
                style: {
                  fontSize: '13px',
                  fontFamily: 'Arial,sans-serif'
                }
              }
            },
            yAxis: [{
              title: {
                useHTML: true,
                text: "ppm",
   ...