JSFiddle - React, Tailwind, and code Playground

by JoeKuan

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/highcharts-more.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/modules/funnel.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/modules/drilldown.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
	<body>
  <div>
    <div id="container"></div>
  </div>
	</body>

JavaScript

document.title = "Highcharts " + Highcharts.version;

    $(document).ready(function() {
       var chart = null;
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
            },
            title: {
                text: "Product from Web Visits to Sales"
            },
            credits: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            series: [{
                    type: 'funnel',
                    width: '60%',
                    height: '80%',
                    neckWidth: '20%',
                    id: 'productB',
                    dataLabels: {
                        format: '{point.name} - {y}',
                        color: '#222'
                    },
                    data: [{
                       name: 'Website visits',
                       y: 29844
                    }, {
                       name: 'Product downloads',
                       y: 9891
                    }, {
                       name: 'Request Trial License',
                       y: 7744
                    }, {
                       name: 'Activate Trial License',
                       y: 6512
                    }, {
                       name: 'Product sales',
                       y: 678
                    }]
                }]
        });

       });