⚡️ Black Friday ends in 1 day - 50% off CodyHouse Pro Lifetime →

Projects

Progress value is 30%

Area Chart

Data visualisation using SVG Area Chart.

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. Variations share the same SCSS/JS code but 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

Globals imported

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