Chartjs-How we can draw a circle in bar chart

by

2👍

✅

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>

Leave a comment