Area Chart

Data visualisation using SVG Area Chart.

Dependencies

• Swipe Content
• Chart Plugin

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

Categories

• Data Display > Chart

Bug report & feedback

Component Github page ↗