React-Vis - How Do I render an empty chart area?

Question

I'm working on a react-vis chart that will dynamically update the data that is displayed when a user clicks on/off the legend item for that series.

If a user clicks clicks off all of the series the JSX that I render essentially looks like this:

  <div>
    <XYPlot
      xDomain={paretoOrder}
      margin={{left: 150, bottom: 150}}
      width={450}
      height={450}
      xType="ordinal"
      stackBy="y"
    >
      <VerticalGridLines />
      <HorizontalGridLines />
      <XAxis
        tickLabelAngle={-45}
      />
      <YAxis 
        tickFormat={ tick => translator.formatTime(tick, {hideZero: true})}
      />
      <VerticalBarSeries
        data={[]}
      />
    </XYPlot> 
    <DiscreteColorLegend
      orientation="horizontal"
      width={300}
      items={legendItems}
      onItemClick={this.onLegendClick}
    />
  </div>

I would expect that this would still render the axes, the grid lines, etc, but the entire chart is removed from the DOM instead. How do I render a chart with empty data but keep the axes, grid lines, etc in the DOM?

Gasp · Answer 1 · 2019-05-16T15:22:13.417

1

Add dontCheckIfEmpty prop (as true, default is false) to <XYPlot> tag.

 <XYPlot
   dontCheckIfEmpty
 >
   <XAxis/>
   <YAxis/>
   <VerticalBarSeries
      data={data}
   />
   <VerticalGridLines />
   <HorizontalGridLines />
 </XYPlot>

edited May 16 '19 at 15:22

answered May 15 '19 at 11:53

Gasp

11
3

3

Using this property on a FlexibleWidthXYPlot caused my whole page to crash with an error: Cannot read property 'ticks' of null – Ralph Willgoss Oct 03 '19 at 16:29

React-Vis - How Do I render an empty chart area?

1 Answers1