Area Chart Vue Component

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

area-chart.vue

<template>
  <f7-page>
    <f7-navbar title="Area Chart" />
    <f7-block strong-ios outline-ios>
      <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>
    </f7-block>
    <f7-block-title>Simple Area Chart</f7-block-title>
    <f7-block strong-ios outline-ios>
      <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-ios outline-ios>
      <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-ios outline-ios>
      <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-ios outline-ios>
      <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-ios outline-ios>
      <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>
import { f7Page, f7Navbar, f7BlockTitle, f7Block, f7AreaChart } from 'framework7-vue';

export default {
  components: {
    f7Page,
    f7Navbar,
    f7BlockTitle,
    f7Block,
    f7AreaChart,
  },
  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>

Improve this Doc

On this page

Area Chart Components
Area Chart Properties
Area Chart Events
Examples