How we can draw a circle in bar chart - chart.js

Question

I am new to chart.js I want to draw a circle inside bar charts or at baseline like the picture circle in blue color below how can I achieve this
help me thanks in advance

Answer 1

In your existing bar chart configuration, you can define a second dataset of type: 'scatter' as follows:
{
type: 'scatter',
data: [0, 0, 0, 0, 0, 0, 0],
backgroundColor: "rgb(0, 0, 255)",
borderColor: "rgb(255, 255, 255)",
pointRadius: 7,
pointHoverRadius: 7,
borderWidth: 2
}
Please take a look at the runnable code below and see how it works.
new Chart("chart", {
type: "bar",
data: {
labels: ["A", "B", "C", "D", "E", "F", "G"],
datasets: [{
data: [65, 59, 80, 81, 56, 55, 40],
barPercentage: 0.5,
backgroundColor: "rgba(201, 203, 207, 0.2)",
borderColor: "rgb(201, 203, 207)",
borderWidth: 1
},
{
type: 'scatter',
data: [0, 0, 0, 0, 0, 0, 0],
backgroundColor: "rgb(0, 0, 255)",
borderColor: "rgb(255, 255, 255)",
pointRadius: 7,
pointHoverRadius: 7,
borderWidth: 2
}
]
},
options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
canvas {
max-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="200"></canvas>