XYChart not filling horizontally - looks like it is padded

[shirkan]

Hi,
I want to thank you for creating this great set of visualization components.
I've created a code to wrap xychart and used it in several components of my own, the thing is it is not filling horizontally and I'm not sure why. In the picture, the selected div is xychart's top element:

Notice how there are spaces left on the sides.
Is there a way to eliminate them?

My code:

import React, { useMemo } from "react";

import {
  Grid,
  LineSeries,
  XYChart,
  Axis,
  Tooltip,
  buildChartTheme,
} from "@visx/xychart";
import { curveLinear, curveStep, curveCardinal } from "@visx/curve";

const GRID_COLOR = "#adb5bd66";

export default function XYChartWrapper(props) {
  const {
    showGridRows = true,
    showGridColumns = true,
    animationTrajectory = "center",

    data,
    dataKeys, // dataKeys is an object which keys are names of keys in data and value are props to pass to LineSeries
    curveType = "linear",
    xAxis = true,
    xScaleType = "time",
    xOrientation = "bottom",
    xLabel,
    xKey,
    xNumTicks = 10,
    xTickFormat = (x) => x,
    yAxis = false,
    yScaleType = "linear",
    yOrientation = "right",
    yLabel,
    yNumTicks = 10,
    yTickFormat = (x) => x,
    tooltipCallback,
    snapTooltipToDatumX = true,
    snapTooltipToDatumY = false,
    showTooltipVerticalCrosshair = true,
    showTooltipHorizontalCrosshair = false,
    showDatumGlyph = true,
    showSeriesGlyphs = true,
    height = 400,
  } = props;

  const curveKeys = Object.keys(dataKeys);
  const colors = curveKeys.map((key) => dataKeys[key].stroke);
  const theme = buildChartTheme({ colors: colors });

  const xDomain = [
    Math.min.apply(
      null,
      data.map((x) => x[xKey])
    ),
    Math.max.apply(
      null,
      data.map((x) => x[xKey])
    ),
  ];
  const xScale = {
    type: xScaleType,
    domain: xDomain,
  };

  const yScale = {
    type: yScaleType,
  };

  const accessors = useMemo(
    () => ({
      x: Object.assign({}, ...curveKeys.map((x) => ({ [x]: (d) => d[xKey] }))), // take X from a single place
      y: Object.assign({}, ...curveKeys.map((x) => ({ [x]: (d) => d[x] }))), // take Y from dataKey in data
    }),
    []
  );

  const curveTypeSelector = () => {
    switch (curveType) {
      case "cardinal": {
        return curveCardinal;
      }
      case "step": {
        return curveStep;
      }
      default:
      case "linear": {
        return curveLinear;
      }
    }
  };

  const linesSeries = (
    <>
      {curveKeys.map((dataKey) => (
        <LineSeries
          key={dataKey}
          dataKey={dataKey}
          data={data}
          xAccessor={accessors.x[dataKey]}
          yAccessor={accessors.y[dataKey]}
          curve={curveTypeSelector()}
          {...dataKeys[dataKey]}
        />
      ))}
    </>
  );

  return (
    <XYChart theme={theme} xScale={xScale} yScale={yScale} height={height}>
      <Grid
        key={`grid-${animationTrajectory}`} // force animate on update
        rows={showGridRows}
        columns={showGridColumns}
        lineStyle={{
          stroke: GRID_COLOR,
        }}
      />
      {xAxis && (
        <Axis
          key={`x-axis`}
          label={xLabel}
          orientation={xOrientation}
          numTicks={xNumTicks}
          animationTrajectory={animationTrajectory}
          tickFormat={xTickFormat}
          stroke={GRID_COLOR}
          tickStroke={GRID_COLOR}
        />
      )}
      {yAxis && (
        <Axis
          key={`y-axis`}
          label={yLabel}
          orientation={yOrientation}
          numTicks={yNumTicks}
          tickFormat={yTickFormat}
          stroke={GRID_COLOR}
          tickStroke={GRID_COLOR}
        />
      )}
      {linesSeries}

      {tooltipCallback && (
        <Tooltip
          unstyled={true} // Set this to true so style can be defined by user
          applyPositionStyle={true} // Set this to true so tooltip will be positioned correctly since unstyles is true
          showVerticalCrosshair={showTooltipVerticalCrosshair}
          showHorizontalCrosshair={showTooltipHorizontalCrosshair}
          snapTooltipToDatumX={snapTooltipToDatumX}
          snapTooltipToDatumY={snapTooltipToDatumY}
          showDatumGlyph={showDatumGlyph}
          showSeriesGlyphs={showSeriesGlyphs}
          renderTooltip={({ tooltipData }) => tooltipCallback(tooltipData)}
        />
      )}
    </XYChart>
  );
}

[williaster]

hey @shirkan thanks for checking out visx. By default XYChart has padding around it to make room for different placement of axes. (by default svg overflow is clipped, hence why this is added).

You can control it by passing a custom margin object with a shape { top: number, right: number; bottom: number; left: number} (separately it looks like our docs page for xychart is down 😭 )

[shirkan]

Hi @williaster thanks for your fast reply.
At first I actually thought I tried this already, but apparently I mistakenly added margin to the child Grid component instead of XYChart. It works now :)
Thanks again.

[bennettdams]

Hey @williaster,
I still have some space around the area series when using margin on the XYChart - any idea why?

Here's an example, I took the XY chart example from the docs and only added margin, nothing else is changed:

 <XYChart
    ...
    margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
    ...
  >

https://codesandbox.io/s/friendly-driscoll-z95hgx?file=/Example.tsx

[williaster]

ah in this case, the spacing is due to the band type scale. band scales are often used for bar charts, but you can use any series. if you think about what happens for a bar chart, a rect is placed at an x value and has some width, so the center of the bar is x + width/ 2.

for a line or area series, the point is placed at the center of where a bar would be, at x + width / 2. this makes the first point have a gap on the left, and the last point have a gap on the right of width / 2. I'm not sure there's a great way around this unless you use a non-band scale.

[bennettdams]

Thanks, @williaster! I found that one can use the point scale instead (xScale={{ type: "point" }}) to achieve bringing the chart to the horizontal edges:

Unfortunately with the "point" scale I cannot hover the outermost right data point in my chart anymore, but that's another story 😅

[alicenstar]

@bennettdams did you find a way to be able to hover your outermost right data point using this scale?