Charts > Line chart ​

A line chart is a graphical representation of data, where points are connected by straight lines to display trends or variations in values over a continuous interval.

The Chart ​

Randomize dataSample datasetUpload data

Download example CSV

Copy HTML

Playground ​

Data

Animation

Style

Usage Example ​

<template>
  <LineChart :key="key" :data="data" @hover="lineHover" :hover-num="hover" />
</template>

<script setup>
const hover = ref(null);
const lineHover = (e) => {
  if (e) hover.value = e.i;
  else hover.value = null;
};
</script>

Component API ​

The line chart is built with SVG and can show multiple lines. On hover you see a reference line and dot on the nearest data point.

Data ​

[
  [
    { name: "2008", value: 0 },
    { name: "2009", value: 30 },
    { name: "2010", value: 20 },
  ],
  ...
]

Props ​

Events ​

Dependencies ​

• d3

Featured in ​

• EIS
• Movilidad Big Data
• Spott
• UNIDO IDR
• Innobasque
• Fecyt