JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<div style="padding:20px">
<div id="placeholder" style="width:600px;height:300px;"></div>
</div>

JavaScript

$(function () {

    var goal = 20000;
    
    var toTimestamp = function(Y,m,d) {
        return (new Date(Y,m,d)).getTime();;
    };

    var percFormatter = function(val, axis) {
        return (val * 100).toFixed() + '%';
    }

    var moneyFormatter = function (val, axis) {
        return val + "$";
    };

    var options = {
        
        grid: {
            borderWidth: 0
        },
        xaxis: {
            mode: 'time',
            timezone: 'browser',
            timeformat: "%d/%m",
        },
        yaxes: [
            {
                min: 0,
                tickFormatter: moneyFormatter
            },
            {
                show:true,
                position: "right",
                min: 0,
                tickFormatter: percFormatter
            }
        ]
    };

    var series = {
        
        money: {
            color: '#57A4F4',
            data: [
                [toTimestamp(2012,8,1), 1000],
                [toTimestamp(2012,8,2), 5000],
                [toTimestamp(2012,8,3), 8000],
                [toTimestamp(2012,8,4), 10000],
                [toTimestamp(2012,8,5), 15000],
                [toTimestamp(2012,8,8), 17000]
            ],
            lines: {
                show: true
            },
            points: {
                show: true
            },
    label: 'Money'
        },

        goal: {
            color: '#BFE099',
            data: [
                [toTimestamp(2012,7,28), goal ],
                [toTimestamp(2012,8,12), goal ]
            ],
            label: 'Goal',
            shadowSize: 0,
            yaxis: 1,
        }

    };

    $.plot($("#placeholder"), [series.money, series.goal], options);
});