How to useChart Instance Configuration in JavaScript

Approach 1: Using Inline Configuration

In this approach, we are using the Chart Instance Configuration to create the line chart. We have given the borderColor and backgroundColor in Chart Instance.

Syntax:

const myChart = new Chart(ctx, {
    type: 'line',
    data: chartData,
    options: {
        elements: {
            line: {
                backgroundColor: value, 
                borderColor: value
            }
        }
    }
});

Example: The below code example explains the use of chart instance approach to change borderColor and fill values of a chart.

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title>Example 2</title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
      </script>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>w3wiki</h1>
    <h5>
      Approach 2: Using Chart
      Instance Configuration
      </h5>
    <div style="width: 100%; 
                margin: auto;">
        <canvas id="chart2">
          </canvas>
    </div>
    <script>
        const chartData = {
            labels: 
['Python', 'JavaScript', 'Java', 'C++', 'HTML/CSS'],
            datasets: [{
                label: 'Courses Enrollments',
                data: 
                     [1200, 2500, 1800, 800, 600],
            }]
        };
        const ctx2 = document.
        getElementById('chart2').
        getContext('2d');
        const myChart = new Chart(ctx2, {
            type: 'line',
            data: chartData,
            options: {
                elements: {
                    line: {
                        borderColor: 
                          'rgba(255, 120, 86, 1)',
                        fill: true,
                        backgroundColor: 
                          'rgba(255, 25, 0, 0.2)',
                    }
                }
            }
        });
    </script>
</body>
 
</html>

Output:

How to Change the BorderColor and Fill Values in a Chart ?

In Chart.js, to represent the data in a more unique and attractive form, we can customize its appearance by adjusting or applying the borderColor and fill values to the elements of Chart. In this article, we will see two different approaches through which we can change the borderColor and fill values of the chart.

Table of Content

Using Inline Configuration
Using Chart Instance Configuration

Chart.js CDN Link

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Tags:

#Chart.js #Geeks Premier League 2023 #Geeks Premier League #JavaScript #Web Technologies