CODEWITHSUNDEEP
javascriptreactjschartsreact-vis
Gardezi
Gardezi

Reputation: 2842

React Vis MarkSeries is throwing x function is not defined error

has anyone used react-vis? I'm trying to render the Marks over line series when the user hovers over the chart.

The problem is it keeps on throwing an error

x is not a function.

Has anyone run into such kind of issue? the error comes when I try to render marks or try to show tooltip over the line series.

Here is my render function 

<XYPlot
  onMouseLeave={this.handleMouseOver}
  handleMouseOver={this.handleMouseOver}
  xAxis={{
    tickValue: xAxis,
    tickFormat: this.formatXAxisTick,
    timeUnit: TIMEUNIT[chartHorizontalUnit]
  }}
  yAxis={{
    tickValue: yAxisLabelArray,
    tickFormat: value => `${value} ${chartVerticalUnit}`
  }}
>
  {lineList.map((line, index) => (
    <LineSeries
      key={index}
      {...line.toJS()}
      curve="curveMonotoneX"
      selected={
        isNull(selectedLegendValue) || line.get("label") === selectedLegendValue
      }
      {...(line.get("data").size === 1 ? { sizeDomain: [] } : null)}
      onNearestX={(datapoint, { index, event, innerX }) =>
        this.handleMouseOver(datapoint, event, innerX)
      }
    />
  ))}

  {toolTipValue && toolTipValue.size && (
    <>
      {toolTipValue.map((lineData, i) => (
        <MarkSeries
          key={`mark-${i}`}
          color={lineData.get("label")}
          stroke="white"
          strokeWidth={2}
          data={[
            {
              x: lineData.get("x"),
              y: lineData.get("y")
            }
          ]}
        />
      ))}
    </>
  )}
</XYPlot>;

XYPlot is a wrapper around react-vis XYPlot. XAxis and YAxis. Did anyone else run into such kind of issue?

Here is the screenshot of the error

enter image description here

Upvotes: 1

Views: 729

Answers (1)

Gardezi
Gardezi

Reputation: 2842

So I was able to figure out what was going wrong over here. You cannot wrap react-vis component inside a wrapper. If we really want to wrap it in a wrapper, then we will have to call the wrapper like a function.

Using React.Fragment · Issue #1095 · uber/react-vis

Upvotes: 3

Related Questions