leeoniya / uPlot

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

drawing a line through y = 0 #410

Closed Yakabuff closed 3 years ago

Yakabuff commented 3 years ago

Hi,

Is there any way to disable the live legend that shows the values for a specific series?

I am trying to draw a horizontal line that goes through y=0

Thanks

leeoniya commented 3 years ago

I am trying to draw a horizontal line that goes through y=0

instead of using a series, you should draw the line directly on canvas over the grid in a drawAxes hook.

take a look at the trendlines example:

https://github.com/leeoniya/uPlot/blob/master/demos/trendlines.html

RedShift1 commented 3 weeks ago

I was able to get this to work with the following in options:

hooks:
{
    drawSeries:
    [
        (u) =>
        {
            const ctx = u.ctx;
            const width = 1;
            const offset = (width % 2 / 2);
            const x0 = u.bbox.left;
            const y0 = u.valToPos(0, 'y', true);
            const x1 = u.bbox.left + u.bbox.width;
            const y1 = u.valToPos(0, 'y', true);

            ctx.save();
            ctx.translate(offset, offset);
            ctx.beginPath();
            ctx.strokeStyle = '#000';
            ctx.lineWidth = width;
            ctx.moveTo(x0, y0);
            ctx.lineTo(x1, y1);
            ctx.stroke();
            ctx.translate(-offset, -offset);
            ctx.restore();
        }
    ]
},

Unfortunately the line isn't pixel perfect, sometimes it's 1 px, other times it's 1.5 px: image

image

I also haven't found a way yet to remove the grey grid line at 0 that's already there.