JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

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


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

<button onClick="function('1')">Test</button>

<div class="container">
<div id="aktie" class="width__full"></div>
<div id="boerse_rendite" class="width__half"></div>
<div id="boerse_wachstum_monat" class="width__half"></div>
<div id="boerse_wachstum" class="width__half"></div>
<div id="boerse_vermoegen" class="width__half"></div>
<div id="boerse_investments" class="width__half"></div>
<div id="ausgaben" class="width__half"></div>
<div id="betrag" class="width__half"></div>
<div id="wachstum" class="width__full"></div>
<div id="vermoegen" class="width__full"></div>
</div>

CSS

.container {
   display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 100px;
}

.width__half {
  width: 50%;
}

.width__full {
  width: 100%;
}

iframe {
  width: 100%;
  height: 100vh;
  border: 0;
}

JavaScript

var trackingYearStart = -1 + 12 * 6; // last number marks years of tracking
var trackingYearEnd = 16; // last number marks years of tracking
var goalcost = -1100; // goal of expenditure
var col_1_light = '#cadedc'
var col_1_dark = '#437c75'
var col_2_light = '#D49BA8'
var col_2_dark = '#B24C63'
var col_3_light = '#DAE0FB'
var col_3_dark = '#034078'
var col_4_light = '#F2CFDD'
var col_4_dark = '#'
var col_5_light = '#FFE1C2'
var col_5_dark = '#'
var col_6_light = '#cadedc'
var col_6_dark = '#'

var data = 25

var data; //declaration
function test(choice) {
    data = 2; //assignment
}

console.log(data);


let chart1 = Highcharts.chart('vermoegen', {
  data: {
    googleSpreadsheetKey: '1PGxJT_RKeJBC9XncgdmRGreig4luEsqPR55dvScTtlI',
    googleSpreadsheetWorksheet: 1,
    dateFormat: 'dd.mm.yyyy',
    itemDelimiter: ';',
    lineDelimiter: '\n',
    decimalPoint: ',',
    startColumn: 0,
    endColumn: 2,
    startRow: 0,
    parsed: function() {
      this.columns.splice(1, 1);
    }
  },
  chart: {
    type: 'area',
  },
  xAxis: {
    reversed: false,
    type: 'datetime',
    tickInterval: 24 * 3600 * 1000 * 365,
    min: Date.UTC(2009, 8, 1),
    labels: {
      enabled: true,
    }
  },
  yAxis: {
    title: {
      enabled: false
    }
  },
  legend: {
    enabled: false
  },
  title: {
    text: 'Vermögen',
    style: {
      color: col_1_dark,
      fontWeight: 'bold',
      fontFamily: 'Helvetica, Clean, sans-serif'
    }
  },
  plotOptions: {
    area: {
      step: 'center',
      stacking: 'normal',
      fillColor: col_1_light,
      lineColor: col_1_dark,
      lineWidth: 2
    },
    series: {
      marker: {
        enabled: false,
        states: {
          hover: {
            enabled: false
          }
        }
      },
      duration: 2000,
      states: {
        hover: {
          duration: 2000,
          lineWidth: 2.5
        },
      }
    }
  },
  exporting: {
    enabled: true,
    buttons: {
      exportButton: {
        enabled:...