[Question] Remove time (X-axis) and Y values from scales and make background transparent

[henjoe]

Hi just looking around with this libraries, I can see any tutorial online on how am I going to do this, Basically I wanna remove the "Y scales" so that it consumes all available space, and I want to make the background transparent so that it's only shows the line graph.

I need to show a small line graph similar to this:

However the timestamp from x-axis and the values from y-axis is taking up some huge space, I wanna make all the width and height of the uPlot panel to be dedicated only for the line graph. How can I set it to the ChartOptions? Or maybe there is a configuration needed. And also, I wanna make the background of the chart to be transparent (I am not sure if this is possible), if ever possible, what settings or options I need to set.

Thanks in Advance!

Regards,

[henjoe]

Something similar to this #55

[henjoe]

Hi I managed to do the sparkLines with the ff options:

options.legend = {show:false}
options.scales = {x:{time:false}}
options.axes = [{show:false},{show:false}]

I am now left with the transparent background. Is it possible?

Regards,

[PabloAlexis611]

@henjoe I think you can somewhat achieve it like this:

const plot = new uPlot(options, data, element);
plot.under.style.backgroundColor = 'transparent';

[henjoe]

Hi @PabloAlexis611 thanks for this. I will try this.

Regards

[henjoe]

Hi I tried this:

        this.uplot = new uPlot(opt, this.data, this.graph.nativeElement);   
        this.uplot.under.style.backgroundColor = 'transparent';

But it doesn't work on my side. I am using this version of uplot:

  "uplot": "1.6.15",

Should I upgrade? I actually tried it before, but seems like it broken my application.

Regards,

[PabloAlexis611]

Mmm, @henjoe does 'rgba(0,0,0,0)' instead of the word 'transparent' work?

That option also seems to work for me. I'm using uPlot v1.6.30.

[PabloAlexis611]

You could test if it's working by applying a succinct tint - like 'rgba(255,0,0,0.2)'

[PabloAlexis611]

Alternatively, you can also modify this in pure CSS.

If you only have one plot in your app, you can add it to a new CSS sheet you are already importing for your web app.

.u-under {
  background-color: transparent;
}

The u-under CSS class is the one uPlot uses to style that particular component of uPlot

[henjoe]

Thanks for this, I'll try all your suggestion.

[henjoe]

I tried this:

this.uplot = new uPlot(opt, this.data, this.graph.nativeElement);
        this.uplot.under.style.backgroundColor = 'rgba(255,0,0,0.2)';

I think it reflects:

However, what I want is the text on the background will be visible, as you can see, the square border blocking the text behind. I just don't know if this is possible with uplot. I want it to be transparent so that whatever in the back will still be visible.

[leeoniya]

you should definitely use the latest version when reporting bugs :)

I am now left with the transparent background. Is it possible?

uPlot has transparent backgrounds by default.

the sparklines demo specifically sets the background to pink using global css rule, it's not in uPlot core:

https://github.com/leeoniya/uPlot/blob/91de800538ee5d6f45f448d98b660a4a658e587b/demos/sparklines.html#L19-L22

https://jsfiddle.net/x96cLdab/2/

let data = [
  [0, 1, 2],
  [0, 5, 2],
];

const opts = {
  width: 300,
  height: 200,
  scales: {
    x: {
      time: false,
    },
    y: {
      range: (u, dataMin, dataMax) => [dataMin, dataMax],
    }
  },
  padding: [0, 0, 0, 0],
  legend: {
    show: false
  },
  cursor: {
    show: false,
  },
  axes: [
    {
      show: false
    },
    {
      show: false
    }
  ],
  series: [
    {},
    {
      stroke: "red",
      width: 2,
      points: {
        show: false,
      }
    },
  ],
};

let u = new uPlot(opts, data, document.body);