render() {
    const {series, crosshairValues} = this.state;
    return (
      <div className="example-with-click-me">
        <div className="legend">
          <DiscreteColorLegend
            onItemClick={this._legendClickHandler}
            width={180}
            items={series}
          />
        </div>

        <div className="chart">
          <FlexibleWidthXYPlot
            animation
            getX={d => d.left}
            getY={d => d.top}
            onMouseLeave={this._mouseLeaveHandler}
            xDomain={[-0.5, series[0].data.length - 1]}
            height={300}
          >
            <HorizontalGridLines />
            <YAxis
              className="cool-custom-name"
              tickSizeInner={0}
              tickSizeOuter={8}
            />
            <XAxis
              className="even-cooler-custom-name"
              tickSizeInner={0}
              tickSizeOuter={8}
            />
            <VerticalRectSeries
              data={series[0].data.map(({left, top}) => ({
                x0: left - 0.5,
                left: left + 0.5,
                top
              }))}
              stroke="white"
              onNearestX={this._nearestXHandler}
              {...(series[0].disabled ? {opacity: 0.2} : null)}
            />
            <LineSeries
              data={series[1].data}
              curve="curveMonotoneX"
              {...(series[1].disabled ? {opacity: 0.2} : null)}
            />
            <Crosshair
              itemsFormat={this._formatCrosshairItems}
              titleFormat={this._formatCrosshairTitle}
              values={crosshairValues}
            />
          </FlexibleWidthXYPlot>
        </div>

        <button className="click-me" onClick={this._updateButtonClicked}>
          Click to update
        </button>
      </div>
    );
  }
Event handler for onNearestX.
@param {Object} value Selected value.
@param {number} index Index of the series.
@private