🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Area Chart

Data visualisation using SVG Area Chart.

Copy: View demo

Dependencies

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. All variations share the same SCSS/JS code. They only differ in their HTML.

How To

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]]
      }
    ]
  });
}

Options #

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]]
    }
  ],
  // ...
});

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us