Area Chart Vue Component

Area Chart Components
Area Chart Properties
Area Chart Events
Examples

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

Area Chart Components

There are following components included:

f7-area-chart

Area Chart Properties

Prop	Type	Default	Description
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;`
line-chart	boolean	false	Enables lines chart (instead of area chart)
axis	boolean	false	Enables chart horizontal (X) axis
axis-labels	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
toggle-datasets	boolean	false	When enabled it will toggle data sets on legend items click
max-axis-labels	number	8	Max numbers of axis labels (ticks) to be visible on axis
format-axis-label	function(label)		Custom render function to format axis label text
format-legend-label	function(label)		Custom render function to format legend label text
format-tooltip	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; }`
format-tooltip-axisLabel	function(label)		Custom render function to format axis label text in Tooltip
format-tooltipT-total	function(total)		Custom render function to format total value text in Tooltip
format-tooltip-dataset	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

<template>
<f7-page>
  <f7-navbar title="Area Chart" />

  <f7-block-title>Simple Area Chart</f7-block-title>
  <f7-block strong>
    <f7-area-chart
      :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],
        },
      ]"
    />
  </f7-block>
  <f7-block-title>Area Chart With Tooltip</f7-block-title>
  <f7-block strong>
    <f7-area-chart
      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],
        },
      ]"
    />
  </f7-block>
  <f7-block-title>Area Chart With Axis</f7-block-title>
  <f7-block strong>
    <f7-area-chart
      tooltip
      axis
      :axis-labels="dates"
      :format-axis-label="(date) => axisDateFormat.format(date)"
      :format-tooltip-axis-label="(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],
        },
      ]"
    />
  </f7-block>
  <f7-block-title>Area Chart With Legend</f7-block-title>
  <f7-block strong>
    <f7-area-chart
      tooltip
      axis
      :axis-labels="dates"
      legend
      toggle-datasets
      :format-axis-label="(date) => axisDateFormat.format(date)"
      :format-tooltip-axis-label="(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],
        },
      ]"
    />
  </f7-block>
  <f7-block-title>Lines Chart</f7-block-title>
  <f7-block strong>
    <f7-area-chart
      tooltip
      axis
      :axis-labels="dates"
      legend
      toggle-datasets
      line-chart
      :format-axis-label="(date) => axisDateFormat.format(date)"
      :format-tooltip-axis-label="(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],
        },
      ]"
    />
  </f7-block>
</f7-page>
</template>
<script>
export default {
  setup() {
    // 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 {
      dates,
      axisDateFormat,
      tooltipDateFormat,
    };
  },
};
</script>