Area Chart

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

Area Chart Layout

Because Area Chart SVG is generated by JavaScript its HTML layout is as simple as possible:

<!-- Area Chart element -->
<div class="area-chart"></div>

Area Chart App Methods

Now we need to create/initialize the Area Chart. Let's look at related App methods to work with it:

app.areaChart.create(parameters)- create Area Chart instance

  • parameters - object. Object with Area Chart parameters

Method returns created Area Chart's instance

app.areaChart.destroy(el)- destroy Area Chart instance

  • el - HTMLElement or string (with CSS Selector) or object. Area Chart element or Area Chart instance to destroy.

app.areaChart.get(el)- get Area Chart instance by HTML element

  • el - HTMLElement or string (with CSS Selector). Area Chart element.

Method returns Area Chart's instance

app.areaChart.update(parameters)- update/rerender Area Chart SVG according to passed parameters

  • parameters - object. Object with Area Chart parameters

Method returns Area Chart's instance

Area Chart Parameters

Now let's look at list of available parameters we need to create Area Chart:

ParameterTypeDefaultDescription
elHTMLElement
string
Area Chart element. HTMLElement or string with CSS selector of Area Chart element. Generated SVG will be inserted into this element
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
onobject

Object with events handlers. For example:

var areaChart = app.areaChart.create({
  el: '.area-chart',
  on: {
    beforeDestroy: function () {
      console.log('Area Chart will be destroyed')
    }
  }
})

Area Chart Methods & Properties

So to create Area Chart we have to call:

var areaChart = app.areaChart.create({ /* parameters */ })

After that we have its initialized instance (like areaChart variable in example above) with useful methods and properties:

Properties
areaChart.appLink to global app instance
areaChart.elArea Chart HTML element
areaChart.$elDom7 instance with Area Chart HTML element
areaChart.svgElArea Chart generated SVG HTML element
areaChart.$svgElDom7 instance with generated SVG HTML element
areaChart.paramsArea Chart parameters
Methods
areaChart.update(parameters)Update/rerender Area Chart SVG element according to passed parameters. It accepts object with same parameters required for Area Chart initialization. You can pass only parameters that needs to be updated, e.g.
var areaChart = app.areaChart.create({
  datasets: datasetsA,
  // ...
});

// and when we need to update rendered SVG based on new datasets:
areaChart.update({
  datasets: datasetsB,
});
areaChart.destroy()Destroys Area Chart instance
areaChart.on(event, handler)Add event handler
areaChart.once(event, handler)Add event handler that will be removed after it was fired
areaChart.off(event, handler)Remove event handler
areaChart.off(event)Remove all handlers for specified event
areaChart.emit(event, ...args)Fire event on instance

Area Chart Events

Area Chart will fire the following DOM events on Area Chart element and events on app and Area Chart instance:

DOM Events

EventTargetDescription
areachart:selectArea Chart Element<div class="area-chart">Event will be triggered (when tooltip enabled) on chart hover
areachart:beforedestroyArea Chart Element<div class="area-chart">Event will be triggered right before Area Chart instance will be destroyed

App and Area Chart Instance Events

Area Chart instance emits events on both self instance and app instance. App instance events has same names prefixed with areaChart.

EventArgumentsTargetDescription
select(areaChart, index)areaChartEvent will be triggered (when tooltip enabled) on chart hover
areaChartSelect(areaChart, index)app
beforeDestroy(areaChart)areaChartEvent will be triggered right before Area Chart instance will be destroyed. As an argument event handler receives Area Chart instance
areaChartBeforeDestroy(areaChart)app

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-area-chart-current-line-stroke-width: 2px;
  --f7-area-chart-current-line-stroke: rgba(0, 0, 0, 0.15);
  --f7-area-chart-axis-text-color: inherit;
  --f7-area-chart-axis-height: 1px;
  --f7-area-chart-axis-font-size: 10px;
  --f7-area-chart-axis-font-weight: 500;
  --f7-area-chart-tooltip-font-size: 12px;
  --f7-area-chart-tooltip-total-label-text-color: rgba(255, 255, 255, 0.75);
  --f7-area-chart-tooltip-total-font-size: 16px;
  --f7-area-chart-tooltip-total-font-weight: bold;
  --f7-area-chart-tooltip-color-size: 10px;
  --f7-area-chart-legend-font-size: 14px;
  --f7-area-chart-legend-font-weight: 500;
  --f7-area-chart-legend-text-color: inherit;
  --f7-area-chart-legend-padding: 4px 8px;
  --f7-area-chart-legend-border-radius: 4px;
  --f7-area-chart-legend-color-size: 14px;
  --f7-area-chart-line-stroke-width: 2px;
  --f7-area-chart-axis-bg-color: rgba(0, 0, 0, 0.15);
  --f7-area-chart-legend-disabled-text-color: rgba(0, 0, 0, 0.22);
}
:root .dark,
:root.dark {
  --f7-area-chart-axis-bg-color: rgba(255, 255, 255, 0.15);
  --f7-area-chart-legend-disabled-text-color: rgba(255, 255, 255, 0.22);
}

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Area Chart</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Simple Area Chart</div>
      <div class="block block-strong">
        <div class="area-chart area-chart-simple"></div>
      </div>
      <div class="block-title">Area Chart With Tooltip</div>
      <div class="block block-strong">
        <div class="area-chart area-chart-with-tooltip"></div>
      </div>
      <div class="block-title">Area Chart With Axis</div>
      <div class="block block-strong">
        <div class="area-chart area-chart-with-axis"></div>
      </div>
      <div class="block-title">Area Chart With Legend</div>
      <div class="block block-strong">
        <div class="area-chart area-chart-with-legend"></div>
      </div>
      <div class="block-title">Lines Chart</div>
      <div class="block block-strong">
        <div class="area-chart area-chart-lines"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $onMounted, $onBeforeUnmount }) => {
    let areaSimple;
    let areaWithTooltip;
    let areaWithAxis;
    let areaWithLegend;
    let areaLines;

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

    $onMounted(() => {
      areaSimple = $f7.areaChart.create({
        el: '.area-chart-simple',
        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]
          },
        ]
      });
      areaWithTooltip = $f7.areaChart.create({
        el: '.area-chart-with-tooltip',
        tooltip: true,
        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]
          },
        ]
      });

      areaWithAxis = $f7.areaChart.create({
        el: '.area-chart-with-axis',
        tooltip: true,
        axis: true,
        axisLabels: dates,
        formatAxisLabel(date) {
          return axisDateFormat.format(date);
        },
        formatTooltipAxisLabel(date) {
          return 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]
          },
        ]
      });

      areaWithLegend = $f7.areaChart.create({
        el: '.area-chart-with-legend',
        tooltip: true,
        axis: true,
        axisLabels: dates,
        legend: true,
        toggleDatasets: true,
        formatAxisLabel(date) {
          return axisDateFormat.format(date);
        },
        formatTooltipAxisLabel(date) {
          return 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]
          },
        ]
      });

      areaLines = $f7.areaChart.create({
        el: '.area-chart-lines',
        tooltip: true,
        axis: true,
        axisLabels: dates,
        legend: true,
        toggleDatasets: true,
        lineChart: true,
        formatAxisLabel(date) {
          return axisDateFormat.format(date);
        },
        formatTooltipAxisLabel(date) {
          return 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]
          },
        ]
      });
    })

    $onBeforeUnmount(() => {
      areaSimple.destroy();
      areaWithTooltip.destroy();
      areaWithAxis.destroy();
      areaWithLegend.destroy();
      areaLines.destroy();
    })

    return $render;
  }
</script>