v6.3.17
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
Improve this Doc

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

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;
line-chartbooleanfalseEnables lines chart (instead of area chart)
axisbooleanfalseEnables chart horizontal (X) axis
axis-labelsarray[]Chart horizontal (X) axis labels. Should have same amount of items as dataset values
tooltipbooleanfalseEnables tooltip on hover
legendbooleanfalseEnables chart legend
toggle-datasetsbooleanfalseWhen enabled it will toggle data sets on legend items click
max-axis-labelsnumber8Max numbers of axis labels (ticks) to be visible on axis
format-axis-labelfunction(label)Custom render function to format axis label text
format-legend-labelfunction(label)Custom render function to format legend label text
format-tooltipfunction(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-axisLabelfunction(label)Custom render function to format axis label text in Tooltip
format-tooltipT-totalfunction(total)Custom render function to format total value text in Tooltip
format-tooltip-datasetfunction(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

<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>