Chart.js-Tutorial-With-Examples/source-code/charts/bar-chart.html at main · saeedkohansal/Chart.js-Tutorial-With-Examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>Bar Chart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sarabun">
    <link rel="stylesheet" href="../styles/example-pages.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
    <div class="chart-container">
        <h1>Bar <pink>Chart</pink> <black>Example</black></h1>
        <canvas id="bar-chart"></canvas>
    </div>
    <script>
        // Get the canvas element with the ID 'bar-chart' and its 2D drawing context
        const ctx = document.getElementById('bar-chart').getContext('2d');

        // Create a new bar chart instance using the Chart.js library
        new Chart(ctx, {
            // Specify the type of chart to render ('bar' for a bar chart)
            type: 'bar',
            // Provide the data for the chart
            data: {
                // Define the labels for the x-axis (months in this case)
                labels: ['January', 'February', 'March', 'April', 'May'],
                // Define the datasets for the chart
                datasets: [
                    {
                        // Label for the dataset
                        label: 'Sales (in USD)',
                        // Data values corresponding to each label
                        data: [12000, 15000, 8000, 18000, 20000],
                        // Define the background colors for the bars (with opacity)
                        backgroundColor: [
                            '#c733ff99',
                            '#ff008b99',
                            '#ffa53399',
                            '#4bc0c099',
                            '#3393ff99'
                        ],
                        // Define the border colors for the bars
                        borderColor: [
                            '#c733ff',
                            '#ff008b',
                            '#ffa533',
                            '#4bc0c0',
                            '#3393ff'
                        ],
                        // Set the width of the bar borders
                        borderWidth: 2
                    }
                ]
            },
            // Define chart configuration options
            options: {
                // Make the chart responsive to screen size
                responsive: true,
                // Prevent maintaining the default aspect ratio
                maintainAspectRatio: false,
                // Set the chart's index axis to horizontal ('x')
                indexAxis: 'x',
                // Configure the chart's axes
                scales: {
                    y: {
                        // Start the y-axis at zero
                        beginAtZero: true,
                        // Configure the y-axis title
                        title: {
                            display: true, // Show the title
                            text: 'Revenue ($)', // Title text
                            padding: 12, // Padding around the title
                            color: '#00f', // Title color
                            font: {
                                family: 'Sarabun', // Font family for the title
                                size: 16, // Font size for the title
                                weight: 'bold' // Font weight for the title
                            }
                        },
                        // Customize the y-axis grid
                        grid: {
                            tickColor: '#00f' // Color for the grid ticks
                        }
                    },
                    x: {
                        // Start the x-axis at zero
                        beginAtZero: true,
                        // Configure the x-axis title
                        title: {
                            display: true, // Show the title
                            text: 'Month', // Title text
                            padding: 12, // Padding around the title
                            color: '#00f', // Title color
                            font: {
                                family: 'Sarabun', // Font family for the title
                                size: 16, // Font size for the title
                                weight: 'bold' // Font weight for the title
                            }
                        },
                        // Customize the x-axis grid
                        grid: {
                            tickColor: '#00f' // Color for the grid ticks
                        }
                    }
                }
            }
        });

        // Set global font family for all Chart.js charts
        Chart.defaults.font.family = 'Sarabun';
        // Set global font size for all Chart.js charts
        Chart.defaults.font.size = 14;
    </script>
</body>

</html>