JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<script src="https://raw.github.com/HumbleSoftware/Flotr2/master/flotr2.min.js"></script>
<button id="resizeChart"> Resize</button>
<div class="chart123">

</div>

CSS

.chart123{
width:300px;
    height:300px;
    border: 1px solid #000000;
}  

.chart234{
width:400px;
    height:400px;
    border: 1px solid #000000;
}

.container{
width:100%;
    height:100%;
}

JavaScript

$(function() {
    var chartContainer = $("<div/>").addClass("container");

    var chart = $(".chart123");
    chart.append(chartContainer);

    var
    d1 = [[0, 4]],
        d2 = [[0, 3]],
        d3 = [[0, 1.03]],
        d4 = [[0, 3.5]],
        graph;

    graph = Flotr.draw(chartContainer[0], [
        {
        data: d1,
        label: 'Comedy'},
    {
        data: d2,
        label: 'Action'},
    {
        data: d3,
        label: 'Romance',
        pie: {
            explode: 50
        }},
    {
        data: d4,
        label: 'Drama'}
    ], {
        HtmlText: false,
        grid: {
            verticalLines: false,
            horizontalLines: false
        },
        xaxis: {
            showLabels: false
        },
        yaxis: {
            showLabels: false
        },
        pie: {
            show: true,
            explode: 6
        },
        mouse: {
            track: true
        },
        legend: {
            position: 'se',
            backgroundColor: '#D2E8FF'
        }
    });

    $("#resizeChart").click(function(){
    chart.toggleClass("chart234");
       //redraw the chart again 
        Flotr.draw(chartContainer[0], [
        {
        data: d1,
        label: 'Comedy'},
    {
        data: d2,
        label: 'Action'},
    {
        data: d3,
        label: 'Romance',
        pie: {
            explode: 50
        }},
    {
        data: d4,
        label: 'Drama'}
    ], {
        HtmlText: false,
        grid: {
            verticalLines: false,
            horizontalLines: false
        },
        xaxis: {
            showLabels: false
        },
        yaxis: {
            showLabels: false
        },
        pie: {
            show: true,
            explode: 6
        },
        mouse: {
            track: true
        },
        legend: {
            position: 'se',
            backgroundColor: '#D2E8FF'
        }
    });
    });

});