JSFiddle - React, Tailwind, and code Playground

by yasemin Cerrahoğlu

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="chart" class="predictedchart" style="height:300px; width:100%"></div>

JavaScript

Highcharts.chart('chart', {
                   chart: {
                    type: 'area'
                   },
                   title: {
                       
                       text: null
                   },
                   credits: {
                       enabled: false
                   },
                   xAxis: { 
                      lineWidth: 0,
                tickWidth: 0,
                  type: 'datetime',
                   tickInterval:  24 * 3600 * 1000, // interval of 1 day
                      pointStart: Date.UTC(2018, 0, 1),
                     labels: {
                     y:-50,
                     step: 90, 
      format: '{value:%e-%m}',
       //align: 'right',                    
                style: {
                    font: 'normal 9px Arial'
                }
      
    },
                       plotLines: [{
                           color: '#666666', // Color value
                           dashStyle: 'line', // Style of the plot line. Default to solid
                           value: Date.UTC(2018, 2, 31), // Value of where the line will appear
                           width: 2, // Width of the line
                           zIndex: 1
                       }],
                      

                   }, 
                                  yAxis: {
                    
        opposite: true,
        
                     minorGridLineWidth: 0,
                gridLineWidth: 0,
                title: {
                    enabled: false
                },
                labels: {
                    enabled: false
                }
                   },
                    legend: {
                enabled: false
            },
            tooltip: {
                pointFormat: '<b>€ {point.y}</b><br/>',
                valueSuffix: ' Predicted Margin',

            },
                   plotOptions: {
                    area: {
                    fillOpacity: 0.5,
                    ...