AreaChart

AreaChart

Area charts are generally used to describe changes in a single value over time. One might choose an area chart over a simple line chart in order to emphasize quantity, as represented by the area within the chart.

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { AreaChart } from '@panorama/toolkit';

let areaChartConfig = {
  data: areaChartData,

  width: 600,
  height: 200,

  // Optionally specify custom margins
  margin: { top: 10, right: 10, bottom: 10, left: 10 },

  // Optionally specify accessors to match your data format
  xAccessor: d => d.time,
  yAccessor: d => d.value,

  // Optionally specify custom scales
  xScale: d3.scale.linear()
    .domain([minTime, maxTime]),
  yScale: d3.scale.linear()
    .domain(minValue, maxValue])
};

ReactDOM.render(<AreaChart {...areaChartConfig}/>, document.body);