Area Chart

Example Usage

<script>
  import { AreaChart, Area, Axis } from "@fanny-pack-ui/svelte-kit";

  function subtractSec(sec) {
    const date = new Date();
    // Setting the milliseconds to zero will ensure that the x-axis
    // labels line up exactly with the plots on the chart.
    date.setMilliseconds(0);
    // Subtract the given seconds from the Date object and set the
    // date object to have the new seconds.
    date.setSeconds(date.getSeconds() - sec);
    return date;
  }

  const simpleData = [
    { timestamp: subtractSec(7), pv: 2400 },
    { timestamp: subtractSec(6), pv: 1398 },
    { timestamp: subtractSec(5), pv: 9800 },
    { timestamp: subtractSec(4), pv: 3908 },
    { timestamp: subtractSec(3), pv: 4800 },
    { timestamp: subtractSec(2), pv: 3800 },
    { timestamp: subtractSec(1), pv: 4300 },
  ];

  /**
   * This will return the value padded with leading zeros,
   * when necessary, so each value has 2 digits.
   */
  function padWithZeros(num) {
    return String(num).padStart(2, "0");
  }

  /**
   * In this chart example each x-axis tick (i.e. each data point's x-value)
   * is a JavaScript Date object. So I am simply calling Date.getHours(), 
   * Date.getMinutes(), and Date.getSeconds() on each x-axis tick and 
   * returning the formatted time.
   */
  function getTime(tick) {
    let hours = padWithZeros(tick.getHours());
    let minutes = padWithZeros(tick.getMinutes());
    let seconds = padWithZeros(tick.getSeconds());
    return `${hours}:${minutes}:${seconds}`;
  }
</script>

<div class="chart-space">
  <AreaChart
    data={simpleData}
    xValueId="timestamp"
    margin={{
      top: 50,
      bottom: 75,
      left: 70,
      right: 5,
    }}
    chartTitleText="Chart Title"
    chartTitleSize=30
    formatTooltipXValue={getTime}
  >
    <Axis
      axisType="xAxis"
      formatTickLabel={getTime}
      tickLabelTranslateX={-15}
      tickLabelTranslateY={35}
      rotateTickLabel={-45}
      showAxisLine={false}
      showTickMarks={false}
      axisLabelText="X-Axis Label"
      axisLabelSize={20}
    />
    <Axis
      axisType="yAxis"
      showAxisLine={false}
      showTickMarks={false}
      axisLabelText="Y-Axis Label"
      axisLabelSize={20}
    />
    <Area
      yValueId="pv"
      color={"var(--primary-color)"}
    />
  </AreaChart>
</div>

<style>
  .chart-space {
    width: 100%;
    height: 400px;
  }
</style>

Multiple Overlaid Areas

You can overlay multiple areas on top of each other. Keep in mind that some of the data points might not display very clearly and your chart might not look very good. You might consider using line charts for this use case instead of area charts.

<script>
  const complexData = [
    {
      timestamp: subtractSec(7),
      uv: 4000,
      pv: 2400,
      amt: 2400,
    },
    {
      timestamp: subtractSec(6),
      uv: 3000,
      pv: 1398,
      amt: 2210,
    },
    {
      timestamp: subtractSec(5),
      uv: 2000,
      pv: 9800,
      amt: 2290,
    },
    {
      timestamp: subtractSec(4),
      uv: 2780,
      pv: 3908,
      amt: 2000,
    },
    {
      timestamp: subtractSec(3),
      uv: 1890,
      pv: 4800,
      amt: 2181,
    },
    {
      timestamp: subtractSec(2),
      uv: 2390,
      pv: 3800,
      amt: 2500,
    },
    {
      timestamp: subtractSec(1),
      uv: 3490,
      pv: 4300,
      amt: 2100,
    },
  ];
</script>

<div class="chart-space">
  <AreaChart
    data={complexData}
    xValueId="timestamp"
    margin={{
      top: 50,
      bottom: 75,
      left: 70,
      right: 5,
    }}
    chartTitleText="Chart Title"
    chartTitleSize=30
    formatTooltipXValue={getTime}
  >
    ...
    <Area yValueId="uv" color="darkred" />
    <Area yValueId="pv" color="greenyellow" />
    <Area yValueId="amt" color="darkblue" />
  </AreaChart>
</div>

Displaying data without the tooltip

<script lang="ts">
  let currentData = { timestamp: new Date(), pv: null };

  function handleHoveredData(event) {
    currentData = event.detail;
  }
</script>

<div class="current-data">
  <span class="time">Time: {getTime(currentData.timestamp)}</span>
  <span class="value">Value: {currentData.pv}</span>
</div>

<AreaChart
  ...
  showTooltip={false}
  on:hoveredData={handleHoveredData}
>
  ...
</AreaChart>

There are situations where a tooltip might not be the best way to display values from a data point. In the <AreaChart> component you can set showTooltip={false} and listen to the on:hoveredData event. You can then format the data that is displayed to the user however you want.

Props

For the <AreaChart> component

For the <Area> component

For the <Axis> component

Event dispatching for the <AreaChart> component