YAxis domain throws exception "[DecimalError] Invalid argument: NaN"

See original GitHub issue

Setting YAxis’ domain property throws the following exception: Uncaught Error: [DecimalError] Invalid argument: NaN at new Decimal (decimal.js:1876) at getTickValuesFixedDomainFn (getNiceTickValues.js:303) at utils.js:146 at getTicksOfScale (ChartUtils.js:880) at CartesianUtils.js:69 at Array.reduce (<anonymous>) at formatAxisMap (CartesianUtils.js:40) at generateCategoricalChart.js:1429 at Array.forEach (<anonymous>) at CategoricalChartWrapper.updateStateOfAxisMapsOffsetAndStackGroups (generateCategoricalChart.js:1428)

The exception isn’t thrown when setting YAxis’ domain to [0, ‘auto’]. The exception isn’t thrown when using XAxis. Every other domain fails ([0, 100], [0, ‘dataMax’], [0, ‘dataMax - 100’]).

Here’s the code: <AreaChart width={1780} height={433} data={data}> <CartesianGrid strokeWidth={0.2} vertical={false}/> <YAxis tick={{fill: '#474a57'}} axisLine={false} interval="preserveStartEnd" tickCount={11} domain={[0, 100]} tickSize={0} /> <Area strokeWidth={1.5} type="linear" dataKey="key1" stroke={"url(#stroke1)"} fill={"url(#fill1)"} /> <Area strokeWidth={1.5} type="linear" dataKey="key2" stroke={"url(#stroke2)"} fill={"url(#fill2)"} /> </AreaChart>

I’ve encountered the same exception on recharts versions 1.4.1 and 1.6.0 on Google Chrome.

Issue Analytics

State:
Created 4 years ago
Reactions:4
Comments:9 (1 by maintainers)

Top GitHub Comments

4reactions

Haschtlcommented, Jul 18, 2021

I figured out that this is still an issue, if the data-object is an empty list. Then the YAxis domain callbacks return -infinite, which results in the DecimalError. I fixed it like this:

  <YAxis
    type="number"
    yAxisId={1}
    tickFormatter={(value: number) => {
      return value.toPrecision(4);
    }}
    domain={[
      (min: number) => {
        if (isFinite(min)) {
          return min - Math.abs(0.1 * min);
        } else {
          return 0;
        }
      },
      (max: number) => {
        if (isFinite(max)) {
          return max + Math.abs(0.1 * max);
        } else {
          return 1;
        }
      },
    ]}
  />

2reactions

imjustdcommented, May 16, 2019

Finally downgraded to v1.4.4 to make it work like before, so null/undefined values are not drawn, while other lines on the charts are displayed.