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:

Area Chart Properties

PropTypeDefaultDescription
idstringChart element ID attribute
widthnumber640Generated SVG image width (in px)
heightnumber320Generated SVG image height (in px)
datasetsarray[]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;
lineChartbooleanfalseEnables lines chart (instead of area chart)
axisbooleanfalseEnables chart horizontal (X) axis
axisLabelsarray[]Chart horizontal (X) axis labels. Should have same amount of items as dataset values
tooltipbooleanfalseEnables tooltip on hover
legendbooleanfalseEnables chart legend
toggleDatasetsbooleanfalseWhen enabled it will toggle data sets on legend items click
maxAxisLabelsnumber8Max numbers of axis labels (ticks) to be visible on axis
formatAxisLabelfunction(label)Custom render function to format axis label text
formatLegendLabelfunction(label)Custom render function to format legend label text
formatTooltipfunction(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;
}
formatTooltipAxisLabelfunction(label)Custom render function to format axis label text in Tooltip
formatTooltipTotalfunction(total)Custom render function to format total value text in Tooltip
formatTooltipDatasetfunction(label, value, color)Custom render function to format dataset text in Tooltip

Area Chart Events

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