Chart.js

Chart.js

A simple chart component that takes in json data and displays it in various chart styles using Chart.js.

Examples

7-day forecast

City: Columbus

Single data

Multiple data

Components

chart

A chart that illustrates a single y value across the x axis.

Attributes

Name	Description	Type	Example
data	an array of key value pair	Array	[{"country":"France","population":"67.97"},{"country":"Germany","population":"83.8"},{"country":"Japan","population":"125.1"},{"country":"Canada","population":"38.93"}]
type	chart type: line, bar, pie, donut, bubble, area, radar.	String
elementid	id unique to the chart component	String

multi-chart

A chart that illustrates a multiple y value across the x axis.

Attributes

Name	Description	Type	Example
data	an array of arrays of key value pair	Array	[[{"year":2000,"count":16},{"year":2010,"count":40},{"year":2020,"count":51}], [{"year":2000,"count":16},{"year":2010,"count":40},{"year":2020,"count":51}], [{"year":2000,"count":16},{"year":2010,"count":40},{"year":2020,"count":51}],]
datalabels	an array that corresponds to each elemenr in the data array	Array	["France","Germany","Japan","Canada"]
type	chart type: line, bar, pie, donut, bubble, area, radar.	String
elementid	id unique to the chart component	String

Changelog

v1.0.1
Apr 13, 2014
[Bug Fixed]
- Charts are now more responsive on smaller screens.
- Attributes tables in the home page are now also responsive.
v1.0.0
Apr 13, 2014
Initial launch of the Chart.js package.
Added chart and multi-chart components.