XYChart range

[jirikolarik]

Hey,

I'm trying to build a chart with XYChart where I can set a visible range. Let say I have AreaSeries with a date on x axis and values ranging from 200 to 300 on y axis, but I need to display the whole chart with a range from 0 to 400.

[williaster]

Hey @jirikolarik 👋 thanks for checking out visx. Scales in XYChart are controlled by the xScale/yScale config objects that you pass in. These configs match those in @visx/scale exactly, so you can check out those docs for more info if you're not familiar (these basically are d3-scale scales, but accept and object configs rather than the less-intuitive chaining/jQuery-like config that d3 uses).

To specify a custom data range (this is called a domain in d3 nomenclature), you'd simply do something like yScale={{ type: "linear", domain: [-5000, 5000] }}. Here's a codesandbox demo.

[jirikolarik]

Hey @williaster, I hope you don't mind getting back on this topic. In this case the char always begins at 0, how can I make it to begin on the lowest point of the y axis?

Let's say I turned BarSeries into AreaSeries (https://codesandbox.io/s/custom-chart-scale-domain-forked-8slxu) and I want to fill the area black, but not from 0, but all the way from the bottom?

[williaster]

Hey @jirikolarik 👋 most of the series go from 0 to the y-value of Datum because starting below zero could be misleading, can you elaborate on the use case / why you want this effect?

In any case, AreaSeries have an optional y0Accessor (and x0Accessor if the orientation is flipped) which specifies the baseline of the area shape (it defaults to 0).

Here's a forked sandbox which just specifies y0Accessor={() => -5000}

[suvrabha]

Getting error Type '"linear"' is not assignable to type '"band"'when I specify domain in yScale

[KuNman]

Hey @williaster , thanks for example, but could you demo how can I set starting point for y axis as for example 1000? I get empty space between 0-1000 value as right axis doesn't autoscale to minimum value, it's always hardcoded to 0.

[williaster]

I believe this is likely due to zero: true being the default for linear scales. Here's an update where I set the domain to [1000, 5000] and zero: false https://codesandbox.io/s/custom-chart-scale-domain-forked-x39x9?file=/Example.tsx