render()

in modules/monochrome/src/metric-card/chart.js [326:378]


  render() {
    const {
      theme,
      width,
      height,
      style,
      formatYTick,
      formatXTick,
      xTicks,
      yTicks,
      horizontalGridLines,
      verticalGridLines,

      onMouseEnter,
      onMouseMove,
      onMouseLeave,
      onClick
    } = this.props;

    return (
      <ChartContainer
        theme={theme}
        userStyle={style.chart}
        tooltipStyle={style.crosshair}
        style={{width, height}}
      >
        <AutoSizer>
          {({width: chartWidth, height: chartHeight}) => (
            <XYPlot
              width={chartWidth}
              height={chartHeight}
              margin={style.margin || DEFAULT_MARGIN}
              {...this._getScaleSettings()}
              onClick={onClick}
              onMouseEnter={onMouseEnter}
              onMouseMove={onMouseMove}
              onMouseLeave={onMouseLeave}
            >
              {xTicks > 0 && <XAxis title="" tickFormat={formatXTick} tickTotal={xTicks} />}

              {yTicks > 0 && <YAxis title="" tickFormat={formatYTick} tickTotal={yTicks} />}

              {horizontalGridLines > 0 && <HorizontalGridLines tickTotal={horizontalGridLines} />}
              {verticalGridLines > 0 && <VerticalGridLines tickTotal={verticalGridLines} />}

              {this._renderSeries()}
              {this._renderCrosshair()}
            </XYPlot>
          )}
        </AutoSizer>
      </ChartContainer>
    );
  }