Area Chart React Component

Framework7 comes with simple Area Chart component. It produces nice looking fully responsive SVG charts.

Area Chart Components

There are following components included:

AreaChart

Area Chart Properties

Prop	Type	Default	Description
id	string		Chart element ID attribute
width	number	640	Generated SVG image width (in px)
height	number	320	Generated SVG image height (in px)
datasets	array	[]	Chart data sets. Each object in `datasets` array has the following properties: `/** Dataset value / values: number[]; /* Dataset HEX color / color?: string; /* Dataset label */ label?: string;`
lineChart	boolean	false	Enables lines chart (instead of area chart)
axis	boolean	false	Enables chart horizontal (X) axis
axisLabels	array	[]	Chart horizontal (X) axis labels. Should have same amount of items as dataset values
tooltip	boolean	false	Enables tooltip on hover
legend	boolean	false	Enables chart legend
toggleDatasets	boolean	false	When enabled it will toggle data sets on legend items click
maxAxisLabels	number	8	Max numbers of axis labels (ticks) to be visible on axis
formatAxisLabel	function(label)		Custom render function to format axis label text
formatLegendLabel	function(label)		Custom render function to format legend label text
formatTooltip	function(data)		Custom render function that must return tooltip's HTML content. Received `data` object has the following properties: `index: number; total: number; datasets: { color?: string; label: any; value: number; }`
formatTooltipAxisLabel	function(label)		Custom render function to format axis label text in Tooltip
formatTooltipTotal	function(total)		Custom render function to format total value text in Tooltip
formatTooltipDataset	function(label, value, color)		Custom render function to format dataset text in Tooltip

Area Chart Events

Event	Arguments	Description
select	(index)	Event will be triggered (when tooltip enabled) on chart hover

Examples

area-chart.jsx

import React from 'react';
import { Page, Navbar, BlockTitle, Block, AreaChart } from 'framework7-react';

export default () => {
  // helpers data for axis
  const dates = [];
  const today = new Date();
  const year = today.getFullYear();
  const month = today.getMonth();
  for (let i = 0; i < 4; i += 1) {
    dates.push(new Date(year, month - (3 - i)));
  }
  const axisDateFormat = Intl.DateTimeFormat(undefined, { month: 'short', year: 'numeric' });
  const tooltipDateFormat = Intl.DateTimeFormat(undefined, { month: 'long', year: 'numeric' });

  return (
    <Page>
      <Navbar title="Area Chart" />
      <Block strongIos outlineIos>
        <p>Framework7 comes with simple to use and fully responsive Area Chart component.</p>
        <p>
          Area Chart generates SVG layout which makes it also compatible with SSR (server side
          rendering).
        </p>
      </Block>
      <BlockTitle>Simple Area Chart</BlockTitle>
      <Block strongIos outlineIos>
        <AreaChart
          datasets={[
            {
              color: '#f00',
              values: [0, 100, 250, 300, 175, 400],
            },
            {
              color: '#00f',
              values: [100, 75, 133, 237, 40, 200],
            },
            {
              color: '#ff0',
              values: [100, 300, 127, 40, 250, 80],
            },
          ]}
        />
      </Block>
      <BlockTitle>Area Chart With Tooltip</BlockTitle>
      <Block strongIos outlineIos>
        <AreaChart
          tooltip
          datasets={[
            {
              label: 'Red data',
              color: '#f00',
              values: [100, 75, 133, 237, 40, 200],
            },
            {
              label: 'Blue data',
              color: '#00f',
              values: [100, 300, 127, 40, 250, 80],
            },
            {
              label: 'Yellow data',
              color: '#ff0',
              values: [0, 100, 250, 300, 175, 400],
            },
          ]}
        />
      </Block>
      <BlockTitle>Area Chart With Axis</BlockTitle>
      <Block strongIos outlineIos>
        <AreaChart
          tooltip
          axis
          axisLabels={dates}
          formatAxisLabel={(date) => axisDateFormat.format(date)}
          formatTooltipAxisLabel={(date) => tooltipDateFormat.format(date)}
          datasets={[
            {
              label: 'Green data',
              color: '#0f0',
              values: [100, 75, 133, 237],
            },
            {
              label: 'Red data',
              color: '#f00',
              values: [100, 300, 127, 47],
            },
            {
              label: 'Yellow data',
              color: '#ff0',
              values: [0, 100, 250, 307],
            },
          ]}
        />
      </Block>
      <BlockTitle>Area Chart With Legend</BlockTitle>
      <Block strongIos outlineIos>
        <AreaChart
          tooltip
          axis
          axisLabels={dates}
          legend
          toggleDatasets
          formatAxisLabel={(date) => axisDateFormat.format(date)}
          formatTooltipAxisLabel={(date) => tooltipDateFormat.format(date)}
          datasets={[
            {
              label: 'Red data',
              color: '#f00',
              values: [100, 300, 127, 47],
            },
            {
              label: 'Blue data',
              color: '#00f',
              values: [100, 75, 133, 237],
            },
            {
              label: 'Yellow data',
              color: '#ff0',
              values: [0, 100, 250, 307],
            },
          ]}
        />
      </Block>
      <BlockTitle>Lines Chart</BlockTitle>
      <Block strongIos outlineIos>
        <AreaChart
          tooltip
          axis
          axisLabels={dates}
          legend
          toggleDatasets
          lineChart
          formatAxisLabel={(date) => axisDateFormat.format(date)}
          formatTooltipAxisLabel={(date) => tooltipDateFormat.format(date)}
          datasets={[
            {
              label: 'Red data',
              color: '#f00',
              values: [0, 300, 127, 47],
            },
            {
              label: 'Blue data',
              color: '#00f',
              values: [0, 75, 133, 237],
            },
            {
              label: 'Green data',
              color: '#0f0',
              values: [0, 100, 250, 307],
            },
          ]}
        />
      </Block>
    </Page>
  );
};

Improve this Doc

On this page

Area Chart Components
Area Chart Properties
Area Chart Events
Examples