Render a default empty state

[dalyemmett]

Hi guys,

Is there anyway to use the components to render a default or empty state? Instead of just not showing a chart, but show the grid & grid lines etc?

I can't see anything in the docs and have tried:

<ParentSize>
  {({ width, height }) => (
    <div>
      <XYChart
        width={width}
        height={height}
        xScale={{
          type: 'band',
          paddingInner: 0.6,
          paddingOuter: 0.6,
        }}
        yScale={{ type: 'linear' }}
        theme={theme}
      >
        <Grid
          columns
          rows
          strokeWidth={1}
          numTicks={12}
          numTicksColumns={12}
          numTicksRows={12}
        />
      </XYChart>
    </div>
  )}
</ParentSize>

Many thanks,
Emmett

[williaster]

Hey @dalyemmett, all children of XYChart depend on the data context provided by XYChart. Data that are passed as props to *Series components are "registered" by the series in that data context, and XYChart is able to compute x and y scales that account for the data ranges of all *Series children.

Therefore, when you only render a Grid, there are no data (or scales) stored in the data context. The Grid component doesn't randomly create lines, the lines map from the data values to the pixel space of the chart. In order to accomplish what you'd want there are at least 2 options:

1. render an "invisible" line series with made up default data that the grid lines will be based off. here's a sandbox example.
   

2. another approach would be to write a CustomGrid component, which uses useContext and introspects the data registry (there are examples of this under advanced usage in the docs. It's just simple React context). If there are no scales available, it could render a Grid component from @visx/grid (which requires 2 scales for the rows and columns which you would have to create yourself) and if there are scales available in context, it could just render the @visx/xychart Grid (which will use the scales from context to render rows and columns). This seemed slightly more complicated.

Also, you don't need to use ParentSize with XYChart, it will expand to fill its parent dimensions (using its own ParentSize) if you don't specify them.

Hope that helps!