How to useInline Configuration in JavaScript

Q: How to useInline Configuration in JavaScript

In this approach, we will use the backgroundColor and borderColor properties of the inline configuration which are in the dataset section to change the border color and fill values of the bars.

Approach 2: Using Chart Instance Configuration

In this approach, we will use the backgroundColor and borderColor properties of the inline configuration which are in the dataset section to change the border color and fill values of the bars.

Syntax:

datasets: [{
    // Other properties
    backgroundColor: value,
    borderColor: value, 
    borderWidth: value
}]

Example: The below code example implements the inline configuration approach to change the borderColor and fill values in a chart.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Example 1</title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
    </script>
</head>
 
<body>
    <h2 style="color:green">
        w3wiki
    </h2>
    <h5>
      Approach 1: Using Inline Configuration
      </h5>
    <canvas id="geeksChart"
            width="400"
            height="200">
      </canvas>
    <script>
        let data = {
            labels: 
['January', 'February', 'March', 'April', 'May'],
            datasets: [{
                label: 
          'w3wiki Monthly Visitors',
                data: [200, 350, 480, 600, 750],
                backgroundColor: 
                  'rgba(43, 111, 255, 0.7)',
                borderColor: 
                  'rgba(255, 225, 1, 1)',
                borderWidth: 2
            }]
        };
        let ctx = document.
        getElementById('geeksChart').
        getContext('2d');
        let myChart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </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