JSFiddle - React, Tailwind, and code Playground

by tanvir_alam_shawn

HTML

<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/drilldown.js"></script>
<div id="ProductStat" style="min-width: 400px; height: 450px; margin: 0 auto"></div>

JavaScript

var chartP;

draw_product_chart();

function draw_product_chart()
{
   Highcharts.setOptions({ colors:['#8BC3E8'] });

   var colors = '#8BC3E8',
      categories = [ 'Bil', 'Hus', 'Indbo', 'Ulykke', 'Rejse - Verden', 'Hund', 'Børneforsikring', ];      name = 'Tryg',
      level = 0,
      data = [ { y:55.33,color: '#8BC3E8',drilldown:{ id:23, name:'Bil',color: '#8BC3E8' } }, { y:20.35,color: '#8BC3E8',drilldown:{ id:22, name:'Hus',color: '#8BC3E8' } }, { y:9.90,color: '#8BC3E8',drilldown:{ id:15, name:'Indbo',color: '#8BC3E8' } }, { y:9.23,color: '#8BC3E8',drilldown:{ id:25, name:'Ulykke',color: '#8BC3E8' } }, { y:3.03,color: '#8BC3E8',drilldown:{ id:36, name:'Rejse - Verden',color: '#8BC3E8' } }, { y:1.73,color: '#8BC3E8',drilldown:{ id:24, name:'Hund',color: '#8BC3E8' } }, { y:0.43,color: '#8BC3E8',drilldown:{ id:43, name:'Børneforsikring',color: '#8BC3E8' } }, ];

  chartP = new Highcharts.Chart({
      chart: {
         renderTo: 'ProductStat', 
         type: 'column',
         events: {
              
            }
      },
      title: {
         text: 'TOTAL STATISTICS OF TRYG',
         style: {
                fontSize: '15px',
                fontWeight: 'bold',                
                color: '#000000'
            },
            align: 'center'
      },   
      subtitle: {
         text: '<div style="font-size: 14px; color:#000000;">Total amount of clicks divided into products (%)</div><br><br> <div style="font-size: 10px; color:#000000;">22-12-2015 to 15-02-2016</div><br><br><div style="font-size: 10px; color:#33c570;">Click each product to view details</div>',
         style: {
                fontWeight: 'bold'
            }
      },
      xAxis: {
         categories: categories
      },
      yAxis: {
         title: {
            text: 'Total percent %',
                style: {
                    fontWeight: 'bold',
                    fontSize: '11px',                    
                    color: '#000000'
                }
       ...