JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div class="container">
<div id="test" class="width__full"></div>
</div>




<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>

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;
}

button.activ {
  background: darkgray;
}

button.inactiv {
  background: gray;
}

button:focus {
  background: white;
  outline: none;
}

JavaScript

var trackingYearStart = -3 + 12 * 6; // last number marks years of tracking
var trackingYearEnd = 23; // number marks first row of tracking
var stockNumber = 8 + 38; // number of stocks ( active & inactive)
var goalcost = -1100; // goal of expenditure

var trackingYearStartChris = -5 + 12 * 3; // last number marks years of tracking
var trackingYearEndChris = 13; // last number marks years of tracking
var stockNumberChris = 10 + 8; // number of stocks ( active & inactive)

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 = '#'


let chart11 = Highcharts.chart('test', {
  data: {
    googleSpreadsheetKey: '1PGxJT_RKeJBC9XncgdmRGreig4luEsqPR55dvScTtlI',
    googleSpreadsheetWorksheet: 5,

    startColumn: 0,
    endColumn: 47,
    startRow: trackingYearEnd,
    endRow: trackingYearStart,
    parsed: function() {
      this.columns.splice(1, 9)
    },
  },
        chart: {
            type: 'pie'
        },


});
/*
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:...