JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

JavaScript

/**
 * для вопроса https://toster.ru/q/582118
 * Как нарисовать такой график?
 */
const points = ["Aaa", "Bbb", "Ccc", "Ddd"];
const now = 2; // "Ccc"

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "500px");
svg.setAttribute("height", "200px");
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");

// axis
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x","0");
rect.setAttribute("y","30");
rect.setAttribute("width","100%");
rect.setAttribute("height","3");
rect.setAttribute("fill","#AAA");

svg.appendChild(rect);

// Now blue circle
const bc = document.createElementNS("http://www.w3.org/2000/svg", "circle");
bc.setAttribute("cx", 6 + now * (500 - 50) / (points.length - 1));
bc.setAttribute("cy", 32);
bc.setAttribute("r", 10);
bc.setAttribute("fill", "#36F");
svg.appendChild(bc); 

// circles + text
for (let i = 0; i < points.length; i++) {
	const x = 4 + i * (500 - 50) / (points.length - 1);
  circ(x);
  text(points[i], x);
}
document.body.appendChild(svg);

function text(str, x) {
	const t = document.createElementNS("http://www.w3.org/2000/svg", "text");
  t.setAttribute("x", x - 5);
  t.setAttribute("y", 60);
  t.setAttribute("font-size", "20");
  t.setAttribute("text-anchor", "left");
  t.setAttribute("fill", "#333");
  
  const tn = document.createTextNode(str);
  t.appendChild(tn);
  
  svg.appendChild(t);
}

function circ(x) {
	const c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  c.setAttribute("cx", x + 2.5);
  c.setAttribute("cy", 32);
  c.setAttribute("r", 5);
  c.setAttribute("fill", "#AAA");
  svg.appendChild(c);
}