<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Bar Chart with Custom Device Pixel Ratio</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js">
</script>
</head>
<body>
<div>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Chart.js Custom Device Pixel Ratio</h3>
<div><canvas id="barChart"
width="700"
height="250">
</canvas></div>
</div>
<script>
const data = {
labels: ['Java', 'Python', 'JavaScript',
'C++', 'C#'],
datasets: [{
label: 'Popularity',
data: [30, 40, 90, 20, 50],
backgroundColor:
['rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(153, 102, 255)'],
borderWidth: 1
}]
};
const configBar = {
type: 'bar',
data: data,
options: {
devicePixelRatio: 3
}
};
const ctxBar =
document.getElementById('barChart').getContext('2d');
const myBarChart = new Chart(ctxBar, configBar);
</script>
</body>
</html>