JSFiddle - React, Tailwind, and code Playground

by sergiu079

HTML

<body>
<div id="mychart"></div>
</body>

CSS

#mychart {
    padding:20px;
    width:500px;
    height:400px;
}

JavaScript

YUI().use('charts', function (Y) 
{ 
var myDataValues = [ 
    {date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200}, 
    {date:"2/1/2010", miscellaneous:50, expenses:9100, revenue:100}, 
    {date:"3/1/2010", miscellaneous:400, expenses:1100, revenue:1500}, 
    {date:"3/4/2010", miscellaneous:200, expenses:1900, revenue:2800},
    {date:"3/5/2010", miscellaneous:205, expenses:1800, revenue:2900}, 
    {date:"3/6/2010", miscellaneous:210, expenses:1700, revenue:2700}, 
    {date:"3/7/2010", miscellaneous:225, expenses:1900, revenue:2600}, 
    {date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
    {date:"6/4/2010", miscellaneous:3000, expenses:4700, revenue:1200}, 
    {date:"6/7/2010", miscellaneous:6550, expenses:6500, revenue:1100}, 
    {date:"8/6/2010", miscellaneous:4005, expenses:2600, revenue:3500}, 
    {date:"9/1/2010", miscellaneous:1200, expenses:8900, revenue:3800}, 
    {date:"10/7/2010", miscellaneous:2000, expenses:1000, revenue:3650},
    {date:"11/1/2010", miscellaneous:2000, expenses:3700, revenue:2200}, 
    {date:"12/1/2010", miscellaneous:5000, expenses:3100, revenue:4100}
];

var mychart = new Y.Chart({
			dataProvider:myDataValues, 
			render:"#mychart", 
			styles: {
				axes: { 
					date: { 
						label: {
							rotation: -45
						}
					}
				}
			}, 
			categoryKey:"date", 
			categoryType:"time"
		});
} );