Change color of the line in Chart.js line chart

Chart.js is a popular JavaScript library that allows us to easily build charts. In this code snippet, we will cover how to change the color of chart line in Chart.js.

const ctx = document.getElementById('chart_id').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr'],
        datasets: [{
            label: 'Month',
            data: [90, 40, 50, 70],
            borderColor: "#084de0" // Place your color here
        }]
    }
});

Everyone wants to make their Chart.js chart stand out and attractive to the customer, but you want to keep things simple and not overwhelm anyone with a lot of information. Using different colors in your charts are great ways to do this, however, it is important to know how to make sure they appear correctly.

In this code snippet, we describe how to change line color using Chart.js with a live demo.

Dataset borderColor Property

We can use the borderColor property of the dataset to change the color of the line that exists in a line chart. You can assign a color to it in hex or RGBA format. It will take the color and apply it to the lines of a chart created using Chart.js.

A simple code syntax to change the color of the line in Chart.js

datasets: [{
    label: 'label',
    data: [90, 40, 50, 70],
    borderColor: "#084de0"
}]

Live Demo

Was this helpful?