SponsorsBecome a sponsor

Area Chart Svelte 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
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.svelte
<script>
  import { Page, Navbar, BlockTitle, Block, AreaChart } from 'framework7-svelte';

  // 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' });
</script>

<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>
    <!-- prettier-ignore -->
    <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>
    <!-- prettier-ignore -->
    <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>
    <!-- prettier-ignore -->
    <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>
    <!-- prettier-ignore -->
    <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>
    <!-- prettier-ignore -->
    <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