[BoxPlot] How to create an offset with time based X axis #1063
-
|
I'm working on a boxplot graph and i have some difficulties with xAxis :
const xValues = props.fakeData.data.map((item) => item.boxPlot.x)
const xScaleDomain = getMinMax(xValues)
const xScale = scaleUtc({
domain: xScaleDomain,
range: [0, width],
clamp: true,
})Does some know i can make something like padding that my graph stay in the bounds ? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Hey @LoiKos 👋 thanks for checking out Band scales support a If you need a time scale, you will have to manually add a margin on the left/right of the chart so that your labels don't get clipped (content in SVGs gets clipped by HTML parents, which is why your labels are cutoff). Looks like you're already using a bottom margin to accommodate the x-axis, so you'd just need to do the same for the left/right (check this demo for a real example). |
Beta Was this translation helpful? Give feedback.
-
|
Thanks ! I've found a way to handle this. For those who want to know how i handle it, i paste below my "padding" : const xValues = data.map((item) => item.boxPlot.x)
xValues.sort((a, b) => a - b)
const xfirst = xValues[0].clone().subtract(20, 'day')
const xlast = xValues[xValues.length - 1].clone().add(20, 'day')
const xScale = scaleTime({
domain: [xfirst, xlast],
range: [0, width],
})I use dayjs to handle Date but i believe you can do the same with other libs |
Beta Was this translation helpful? Give feedback.
Hey @LoiKos 👋 thanks for checking out
visx. I think the answer to this depends on whether you need ascaleUtc(time) scale, or if you would consider abandscale which will evenly spacestrings representing your dates.Band scales support a
paddingwhich will leave space on the sides for you (see this discussion for more #1035). Note that this is the type of scale we use in ourBoxPlotdemo.If you need a time scale, you will have to manually add a margin on the left/right of the chart so that your labels don't get clipped (content in SVGs gets clipped by HTML parents, which is why your labels are cutoff). Looks like you're already using a bottom margin to accommodate the x-axis, so you'd…