Bar Chart
HTML Code
|
| Bar Chart |
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width,
initial-scale = 1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<meta name = "Description" content = "Enter your
description here"/>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.1.0/slate/bootstrap.min.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Bar Chart</title>
<style>
canvas{
max-width: 100%;
min-height: 500px;
max-height: 500px;
}
</style>
</head>
<body>
<div class = "card mb-1">
<div class = "card-body">
<h4 class = "card-title">Bar Chart (Border Radius)</h4>
</div>
</div>
<div class = "card">
<div class = "card-body">
<canvas id = "bar_chart_border_radius"></canvas>
</div>
</div>
</body>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
<script src = "../../chart.js/dist/chart.min.js"></script>
<script src = "../../Css/background_color.js"></script>
<script src = "bar chart border
radius.js"></script>
</html>
JavaScript Code
var bar_chart_border_radius = document.getElementById('bar_chart_border_radius');
var dataset1 = {
label: 'Data 1',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: BG_19CX8I,
borderColor: BG_19CX7I,
borderWidth: 1,
borderRadius: 10
}
var dataset2 = {
label: 'Data 2',
data: [-11, -28, 22, -25, 22, -13],
backgroundColor: BG_19CX9I,
borderColor: BG_19CX7I,
borderWidth: 1,
borderRadius: 10
}
var data =
{
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [dataset1,dataset2]
}
var scale = {
x:
{
min : 0,
max: 50,
},
y:
{
min : 0,
max: 50,
display: true,
}
}
var legend ={
position: 'right',
}
var title = {
display: true,
text: 'Bar Chart Border Radius'
}
var plugin =
{
responsive: true,
legend: legend,
title: title
}
var option =
{
scales: scale,
plugins: plugin,
responsive: true,
}
var barchart = new Chart(bar_chart_border_radius,
{
//chart type
type: 'bar',
//assign Data
data: data,
//chart style
options: option
}
);
 |
| Bar Chart |
0 Comments