JSFiddle - React, Tailwind, and code Playground

by DrFiZ

HTML

<script src="https://raw.github.com/flot/flot/master/jquery.flot.js"></script>
<script src="https://raw.github.com/flot/flot/master/jquery.flot.time.js"></script>
<script src="http://jquery-flot-direction.googlecode.com/svn/trunk/jquery.flot.direction.js"></script>
<div id="place_holder"></div>

CSS

#place_holder {
    width: 500px;
    height:300px;
}

JavaScript

$.plot(
    "#place_holder",
    [
        [[1, 13, 50], [2, 20, 40], [3, 33, 50], [4, 13, 120], [5, 8, 270], [6, 26, 230]]
    ],
    {
        series: {
             lines: {
                show: true,
                lineWidth: 1
            },
             direction: {
                show: true,
                lineWidth: 1,
                color: "rgb(50, 60, 60)",
                fillColor: "rgb(200, 60, 60)",
                arrawLength: 8,
                angleType: "degree", //degree or radian
                openAngle: 40,
                zeroShow: false,
                threshold: 0.000001,
                angleStart: 0
            }
        }
    }
);