@wikicasa-dev/components · Charts · preferred

LineChart

Chart.js line chart (category, linear or time x-axis) for trends such as average €/m² over time.

import LineChart from "@wikicasa-dev/components/chart/LineChart";

A Chart.js line chart (via vue-chartjs) for values over time or categories: price trends, number of listings per month. Pass Chart.js data and options objects; the chart renders into a <canvas> on the client (the Chart.js code is loaded lazily, so there is nothing to see in server HTML).

Only what the options ask for is loaded:

  • Tooltip, legend and title are registered only if options.plugins.tooltip, .legend or .title is set (an empty object {} is enough).
  • A time x-axis (options.scales.x.type: "time", labels as dates, timestamps or ISO strings) loads the date-fns adapter. Otherwise the x-axis is a category axis and the y-axis linear. No other scale types (logarithmic, radial, time on y) are available.
  • fill: true area charts work.

Usage

<script setup lang="ts">
import LineChart from "@wikicasa-dev/components/chart/LineChart";
import type { ChartData, ChartOptions } from "@wikicasa-dev/components";

const data: ChartData<"line"> = {
  labels: ["Gen", "Feb", "Mar", "Apr", "Mag", "Giu"],
  datasets: [
    {
      label: "Prezzo medio vendita Milano (€/m²)",
      data: [5120, 5180, 5210, 5260, 5245, 5310],
      borderColor: "#2B5DFF",
      backgroundColor: "rgba(43, 93, 255, 0.15)",
      pointBackgroundColor: "#2B5DFF",
      fill: true,
      tension: 0.4,
    },
  ],
};

const options: ChartOptions<"line"> = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: { legend: { display: false }, tooltip: { mode: "index", intersect: false } },
};
</script>

<template>
  <div style="position: relative; height: 220px">
    <LineChart :data="data" :options="options" />
  </div>
</template>

Do / Don't

  • Do wrap it in a container with position: relative and an explicit height, and set maintainAspectRatio: false; otherwise Chart.js sizes the canvas from its width (2:1).
  • Do set plugins.legend: { display: false } explicitly when you don't want a legend: plugins are registered globally, so once any chart on the page has loaded the legend, every chart shows one by default.
  • Do decide plugins and scales.x.type up front: which modules to load is decided once, when the chart is created.
  • Don't use it for bar or pie charts; only line (and DoughnutChart) exist.
  • Use static mock data in mockups; ChartData / ChartOptions types are re-exported from @wikicasa-dev/components.
  • The exposed chartInstance (template ref) gives the Chart.js instance once it has rendered.

API

Generated from the component's types. Do not edit by hand.

Props

Name Type Default Required Description
options _DeepPartialObject<CoreChartOptions<"line"> & ElementChartOptions<"line"> & PluginChartOptions<"line"> & DatasetChartOptions<"line"> & ScaleChartOptions<"line"> & LineControllerChartOptions> yes
data ChartData<"line", (number | Point | null)[], unknown> yes

Events

None.

v-model

None.

Slots

None.

Exposed (template ref)

Name Type
chartInstance Optional<Chart<"line", (number | Point | null)[], unknown>>