JSFiddle - React, Tailwind, and code Playground

by oshirowanen

HTML

<script src="http://highcharts.com/js/testing.js"></script>
        <div class="divWidget">
            <div class="divWidgetheader">
                <a href="#" class="btnWidgetMaximise"></a><a href="#" class="btnWidgetMove"></a><a href="#" class="btnWidgetClose"></a>
            </div>

            <div class="divWidgetSubHeading"></div>
            
            <div style="padding:10px 10px 0px 10px;background-color:White;">
                <div id="chart-container-1" style="height:300px;padding:0px;margin:0px;width:100%;"></div>
            </div>
            
            <div class="divWidgetFooter"></div>
        </div>

CSS

html
{
    background-color:#EEEEEE;
}

.divWidget
{
    width:300px;    
}

.divWidgetheader
{
    background-image:url("widget_firmwide_summary_header_background.png");
    height:41px;
    padding-right:17px;
}

.divWidgetSubHeading
{

    height:10px;
    padding-left:19px;
}

.divWidgetContent
{
    padding-top:14px;
    padding-left:20px;
    padding-right:20px;
    padding-bottom:15px;
    background-color:White;
    text-align:left;
}

.divWidgetFooter
{
    height:6px;
    background-image:url("widget_footer.png");
}

.btnWidgetClose
{
    float:right;
    width: 18px;
    height: 41px;
    display:block;
}

a.btnWidgetClose
{
    background: url("widget_close.png") no-repeat 0 0;
}

a.btnWidgetClose:hover
{
    background-position: 0 -41px;
}

.btnWidgetMove
{
    float:right;
    width: 18px;
    height: 41px;
    display:block;
}

a.btnWidgetMove
{
    background: url("widget_move.png") no-repeat 0 0;
}

a.btnWidgetMove:hover
{
    background-position: 0 -41px;
}

.btnWidgetMaximise
{
    float:right;
    width: 18px;
    height: 41px;
    display:block;
}

a.btnWidgetMaximise
{
    background: url("widget_maximise.png") no-repeat 0 0;
}

a.btnWidgetMaximise:hover
{
    background-position: 0 -41px;
}

JavaScript

var chart1;

chart1 = new Highcharts.Chart( {
    credits: { enabled: false },
    chart: {
        renderTo: 'chart-container-1',
        defaultSeriesType: 'column'
    },
    plotOptions: { series: { animation: false } },
    title: { text: null },
    xAxis: { categories: ['Current financial year'] },
    yAxis: { title: { text: null } },
    series: [ { name:'WIP',data: [1000.00] }, { name:'Billed',data: [2000.00] }, { name:'Debt',data: [500.00] } ],
    tooltip: {
        formatter: function() {
            return '<b>' + this.x + '</b><br />' +
            this.series.name + ': £' + Highcharts.numberFormat(this.y, 0, ',');
        }
    },
    legend: {
        layout: 'horizontal',
        align: 'right',
        verticalAlign: 'top',
        y: 2,
        floating: true,
        borderWidth: 1,
        backgroundColor: '#FFFFFF'
    }
});