leeoniya / uPlot

📈 A small, fast chart for time series, lines, areas, ohlc & bars
MIT License
8.48k stars 370 forks source link

Can scatter plot achieve the shape of scatter points? #913

Open haibins opened 3 months ago

haibins commented 3 months ago

I am trying to implement scatter plots with shapes other than circles, such as rhombuses, hexagons, etc., and connect the points with lines. Is there any such demo? This feature is important because the data I use has a lot of duplicate x data , thanks

leeoniya commented 3 months ago

i think it would be cool to add these to the scatter demo. you'd have to make a new pathBuilder that accepts a shape string as an option or something. internally, a diamond can be drawn like this:

let halfDiagMult = Math.sqrt(2) / 2;

function drawMark(ctx, x, y, size = 10) {
  let halfDiag = size * halfDiagMult;

  ctx.beginPath();
  ctx.moveTo(x - halfDiag, y);
  ctx.lineTo(x, y - halfDiag);
  ctx.lineTo(x + halfDiag, y);
  ctx.lineTo(x, y + halfDiag);
  ctx.fill();
}