JSFiddle - React, Tailwind, and code Playground
HTML
<div id="mychart"></div>
CSS
#mychart {
margin:10px 10px 10px 10px;
padding:10px 10px 10px 10px;
width:350px;
height:350px;
}
JavaScript
YUI().use('charts', function(Y) {
var mychart = new Y.Chart({
type: "line",
categoryType: "time",
//axes: {},
render: "#mychart",
styles: {
graph: {
background: {
fill: {
color: "red"
},
border: {
weight: 0
}
}
}
},
dataProvider: [
{
category: "5/1/2010",
values: 2000},
{
category: "5/2/2010",
values: 50},
{
category: "5/3/2010",
values: 400},
{
category: "5/4/2010",
values: 200},
{
category: "5/5/2010",
values: 5000}
]
});
var graph = mychart.get("graph"),
graphic = graph.get("graphic"),
w = graph.get("width"),
h = graph.get("height"),
mypath = graphic.addShape({
type: "path",
stroke: {
color: "#000000",
weight: 1
}
});
mypath.moveTo(0, 0);
mypath.lineTo(0, h);
mypath.lineTo(w, h);
mypath.end();
graphic._redraw();
});