Beautiful line chart in Vue3 with Chart.js

A step-by-step guide on how to improve the styles of graphs made with Chart.js

Chart.js is a lightweight library for making graphs. The library contains a lot of useful, easy-to-use charts. One such is the line chart.

In this guide, I am going over the configurations to make the line chart look beautiful. Yet, you can apply most of these configurations to the other charts.

I am using the following tech:

• Chart.js
• Vue.js
• Vue-Chart

I divided this tutorial into 3 parts:

1. Improve legend.
2. Line styles.
3. Minify axes’ styles.

In this article, I assume you have:

• Knowledge of Vue3’s options API.
• Basic knowledge of Chartjs.

Default chart

This is the provided example on the Vue Chart site:

Line Chart | Chart.js

We are going to work from there. This is the code you can copy from their site:

<template>
  <Line :data="data" :options="options" />
</template>

<script lang="ts">
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js'
import { Line } from 'vue-chartjs'
import * as chartConfig from './chartConfig.js'

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
)

export default {
  name: 'App',
  components: {
    Line
  },
  data() {
    return {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ]
    }
  }
}
</script>

This is how it looks by default:

We are going to start working from that baseline. And from that raw matter, we’ll bring to life a beautiful graph.

Improve legend

Improving the legend is too much of a hassle. I like to remove the native legend and make my own.

To remove the legend, stop importing and registering it.

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Tooltip
} from "chart.js";
import { Line } from "vue-chartjs";
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Tooltip
);

After that, I am going to make my own legend with Vue.

This simple component suffices:

<template>
  <div class="legend-container">
    <span
      v-for="(legendValue, index) in legendValues"
      :key="`legend-badge-${index}`"
    >
      <span
        :style="{ 'background-color': legendValue.color }"
        class="badge"
      ></span>
      <span>{{ legendValue.label }}</span>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    legendValues: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style scoped>
.legend-container {
  padding: 1em;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 14px;
  justify-content: center;
}
.badge {
  border-radius: 4.5px;
  padding: 0;
  width: 9px;
  height: 9px;
  display: inline-block;
  margin-right: 3px;
}
</style>

This is how it should look:

Take a look at this article if you want to look at it deeper.

Vuejs & Chartjs customize the legend

Line styles

On the line front, we want 4 things:

1. A softer line.
2. Removing the dots on the line.
3. Display information when hovering close to each point radius.
4. Coloring the line.

A softer line

A softer line often looks better. To soften the line we dial up the tension

My sweet spot is 0.3.

datasets: [
  {
    ...
    tension: 0.3,
  },
]

That done let’s improve on the graph’s styles.

Removing the dots on the line

The dots of the line are called point radius. They don’t look so hot. Let’s take them out.

Remove the dots by setting:

datasets: [
  {
    ...
    pointRadius: 0,
  },
]

Let’s also improve the UX a little.

Display information when hovering close to the point radius

We don’t want our users to have to hunt for the point radius. Let’s display the information when the user hovers closely to it.

Inside the options object add:

options: {
  ...
  interaction: {
    intersect: false,
  },
},

This tells the chart that the mouse doesn’t have to hover directly above the point to display its details.

Coloring the line

We don’t want the line in our chart looking gray and sad. Let’s put some color on that baby.

To put color on the line you have to set the borderColor inside the datasets prop.

Like so:

borderColor: "#c319ee",

To set the same color on the line dots:

backgroundColor: "#c319ee",

Important! These options don’t work the same for other charts.

So far this is how our chart is looking:

Looking better. Let’s keep improving it.

Minify axes’ styles

To bring to attention the beauty of the line we created; we need to minify the axes. The default axes look a little clunky.

Minifying the axes can be a little tricky. So, I’ll try to resume it. In case you want to go deep into it take a look at this article:

Chartjs minimal axes

This is the code you need to minify the axes:

options: {
  scales: {
    y: {
      ticks: {
        color: "#b6baca",
      },
      grid: {
        drawTicks: false,
      },
      border: {
        dash: [5, 10],
      },
    },
    x: {
      ticks: {
        color: "#b6baca",
      },
      grid: {
        display: false,
      },
      border: {
        display: false,
      },
    },
  },
},

If you noticed. You can set options for each of the axes. These options are the same for both the axes.

As we are going to a minimalistic aesthetic notice how I hide the axes on x.

Something to notice is that when I do:

x: {
  ...
  grid: {
    display: false,
  },
  ...
},

I am hiding the axes perpendicular to x.

This is something you have to fish for in the docs of Chart.js.

And with that, we should have this:

Ain’t it a fine sight!

Conclusions

• We learned to make a Chart that we can be proud of.
• We learned to use some key features of Chartjs’ API.

I hope this was of use to you, my friend. Peace out.