Help with the configuration

I am trying to make a chart that will have visible x line as dotted line(that matches the position of the values(ticks?)), to have positive value have green color and fill and negative value to have red color and fill, both with gradient.

Something like this:

So far I have this:

{
      uplotData: [
        [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
        [5,-5, 0, 1,5,9,10,15,5,-10,-15,-20,-20,-5,0, 5]
      ],
      uplotOpts: {
        width: 100,
        height: 50,
        cursor: {
          show: false
        },
        select: {
          show: false,
        },
        legend: {
          show: false
        },
        scales: {
          x: {
            time: false
          }
        },
        axes: [
          {
            show: false,
          },
          {
            show: false,
          }
        ],
        series: [
          {},
          {
            stroke: "red",
            width: 1,
            fill: "rgba(255, 0, 0, 0.3)",
          }
        ],
      },

So far that will render me this:

Since the documentation is non-existent i checked the demos but I really don’t get how that fill works or how to render that x- axis properly. I came from apex charts which could not render small charts without a ton of padding and chartjs documentation is horrible to go through.

[leeoniya]

ok, so there are quite a few ways to approach this, depending on exactly what you want.

since you’re not showing the legend, the easiest thing to do would be to simply render the bars and the shaded area as separate series. for a non-interactive sparkline type of setup you dont need to worry about the awkwardness of displaying and toggling the fill separately from the bars. this way we can re-use the line pathBuilder (which is rather complex) and benefit from uPlot’s native caching.

i just added a couple opts in https://github.com/leeoniya/uPlot/commit/6d266593a0cf0533c520fc3d73861a708f0a6bee so that floating bars can be rendered using the built-in renderer instead of having to write a custom one. that commit also includes this demo: https://leeoniya.github.io/uPlot/demos/sparklines-bars.html. the top version uses a shared gradient fill for all the bars, so any which cross zero are bi-colored. the bottom one uses a disp.fill function to determine each bar’s individual color.

[leeoniya]

if you dont need the fill fade, you can just do this for fill:

        return scaleGradient(u, s.scale, 1, [
          [sc.min,  "rgba(255,0,0,0.2)"],
          [     0,  "rgba(0,255,0,0.2)"],
        ], 1, true);