Area Chart
Data visualisation using SVG Area Chart.
Data visualisation using SVG Area Chart.
All components are based on CodyFrame.
If you're using this component, you should also include the SCSS/JS of the following components:
This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.
Use this component to create area charts to represent your data.
You can initialize your chart using the Chart
object and setting the type
option equal to 'area':
var areaChart = document.getElementById('area-chart');
if(areaChart) {
new Chart({
element: areaChart,
type: 'area',
datasets: [
{
data: [[0, 1], [2, 2], [4, -3], [8, 12], [10, 8]]
}
]
});
}
See the Line Chart Info page for a complete list of available options.
In addition to those options, the Area Chart has the additional fillOrigin
option. If set to true, the fill area will intersect the axis orgin (raher than filling end entire area between the data and the x-axis - see --negative-values demo):
new Chart({
element: areaChart,
type: 'area',
fillOrigin: true,
datasets: [
{
data: [[0, 1], [2, 2], [4, -3], [8, 12], [10, 8]]
}
],
// ...
});
Report a bug + changelog on Github ↗ | Suggest new components ↗
📢 We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.