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: AshburnSingle 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, 2014Initial launch of the Chart.js package.
Added chart and multi-chart components.