Value Bar Chart

<chart-ease width="500" height="400" margin="40">
  <data-set id="dsTeams">
    <rect fill="#1D46D6"></rect>
    <circle r="20" fill="white" stroke="#1A3495" stroke-width="2"></circle>
    <text class="value" fill="#1D46D6" font-size="20" font-family="Merriweather,serif"></text>
    <text class="labels" fill="#1D46D6" font-size="20" font-family="Merriweather,serif"></text>
  </data-set>
  <left-axis ticks="6" min="0" max="80"> </left-axis>
  <bottom-axis ticks="7" min="0" max="6">
    <line grid-line stroke="#c8c8c830"></line>
    <line axis-line stroke="blue"></line>
  </bottom-axis>
</chart-ease>

const data = [
  { y: 10, label: "ARS" },
  { y: 40, label: "CHE" },
  { y: 50, label: "MNU" },
  { y: 70, label: "TOT" },
  { y: 30, label: "BUR" },
];

dsTeams = document.getElementById("dsTeams");
const margin = 40;
// Note: barWidth = Round(ChartWidth/BarCount) * (Bar to Gap ratio)
const barWidth = Math.round(500 / data.length) * 0.6;
dsTeams.ondraw = ({ shape, row, originalRow }) => {
  switch (shape.tagName) {
    case "rect":
      shape.setAttribute("x", row.x - barWidth / 2);
      shape.setAttribute("y", margin); // margin

      shape.setAttribute("width", barWidth);
      shape.setAttribute("height", row.y - margin); // y - margin

      shape.setAttribute("fill", "#F9158E");
      if (originalRow.y >= 60) shape.setAttribute("fill", "#8EF915");
      else if (originalRow.y >= 40) shape.setAttribute("fill", "#158EF9");
      break;
    case "circle":
      if (row.x > 0) shape.setAttribute("cx", row.x);
      if (row.y > 0) shape.setAttribute("cy", row.y);
      break;
    case "text":
      const shapeFontSize = 20;
      shape.setAttribute("x", row.x - (originalRow.x.toString().length * shapeFontSize) / 2);
      if (shape.getAttribute("class") == "value") {
        shape.innerHTML = originalRow.y;
        shape.setAttribute("y", row.y - 5);
      } else {
        shape.innerHTML = originalRow.label;
        shape.setAttribute("y", margin / 2);
      }
      break;
  }
};
dsTeams.data = data;

You can use it with live data: