JSFiddle - React, Tailwind, and code Playground

by yasemin CerrahoÄźlu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="accuracy" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

var chart = Highcharts.chart('accuracy', {
chart: {
height:500
},
    title: {
        text: 'Stro'
    },
    xAxis: {
       visible:false
    },
     yAxis: {
      labels: {
            enabled: false
        },
        title: null,
        gridLineWidth: 0,
         plotLines: [{
            color: '#019901',
            width: 2,
            value: 0
        }]
    },
    labels: {
    enabled: false,
        items: [{
            html: '<h4>Total Deviation</h4><br><h5>113.9%</h5>',
            style: {
                left: '50px',
                top: '18px',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
        }]
    },
      legend: {
        enabled: false
    },
     plotOptions: {
      column: {
       // negativeColor: '#c30a14',
        },
        },
    series: [{
        type: 'column',
        data: [5 , 20, 5, 5, -5, -20, -30, -20],
        zones: [
        {
        value:-200,
            color: '#c30a14'
        },
        {
          value:-30,
          color:'#c30a14',
        },{
          value:-20,
          color:'#ff9900',
        },{
          value:0,
          color:'#019901',
        },
        {
          value:30,
          color:'#019901',
        },{
        value:60,
            color: '#ff9900'
        }, {
        value:200,
            color: '#c30a14'
        }],
    }, {
        type: 'pie',
        name: 'Total Deviation Average:',
        colors: ['#434348', '#7f7f7f', '#5b5b5b', '#aeaeae', '#a2a1a1'],
        data: [{
            name: 'Melkkoeien laag',
            y: 13,
           
        }, {
            name: 'Melkkoeien hoog',
            y: 23,
        }, {
            name: 'Jongvee laag',
            y: 19,
        }],
        center: ["90%",0],
        size: 80,
        showInLegend: false,
        dataLabels: {
            enabled: false
        }
    }]
});