The ticks may be not readable

[ddZ6ii]

I want to display a basic Radar chart with React. This works but I get a very annoying console warning.

Not sure whether this bug is related to echarts or echarts-for-react.

Would anyone have a workaround? (I do want to remove either min or max from my config options)

Versions

echarts 5.5.1
echarts-for-react 3.0.2
react 18.3.1

Steps to reproduce

import ReactECharts from "echarts-for-react";

const OPTION = {
  animation: false,
  legend: {
    show: false,
  },
  radar: {
    indicator: [
      { name: "A", min: 0, max: 1 },
      { name: "B", min: 0, max: 1 },
      { name: "C", min: 0, max: 1 },
    ],
    splitNumber: 3,
  },
  series: {
    data: [{ value: [0.8, 0.3, 0.5], name: "Dataset" }],
    type: "radar",
  },
  tooltip: {
    show: true,
  },
};

export default function Radar() {
  return (
    <div className="radar-container">
      <ReactECharts
        option={OPTION}
        style={{ width: "100%", height: "100%", maxHeight: "320px" }}
      />
    </div>
  );
}

Environment

• OS: Windows 10
• Browsers: Firefox v.128.4.0esr (64-bit), Chrome v.131.0.6778.86 (64-bit)

Current behavior

Console warning:

Warning

[ECharts] The ticks may be not readable when set min: 0, max: 1 and alignTicks: true

Expected behavior

No console warning

[RCPawn]

Issue Analysis

Two core issues exist in your radar chart:

1. Incorrect Tick Display: splitNumber: 3 causes axis ticks like 0, 0.333, 0.666, 1
2. Data Scale Confusion: Data in 0-1 range without unit labels may mislead users (e.g., 0.8 mistaken for 80%)

---

Fixed Code

const OPTION = {
  radar: {
    indicator: [
      { name: "A", max: 1 }, // min defaults to 0
      { name: "B", max: 1 },
      { name: "C", max: 1 }
    ],
    splitNumber: 5,          // Axis segments (0, 0.2, 0.4, 0.6, 0.8, 1)
    axisLabel: {
      formatter: value => `${value * 100}%`, // Convert to percentage
      color: "#666"
    },
    axisTick: { show: false },// Hide tick lines
    splitLine: {              // Optimize grid lines
      lineStyle: { 
        type: "dashed",
        color: ["#eee", "#ddd", "#ccc", "#bbb", "#aaa"]
      }
    }
  },
  series: {
    data: [{ 
      value: [0.8, 0.3, 0.5],
      name: "Dataset",
      areaStyle: { color: "rgba(64, 158, 255, 0.3)" } // Add fill color
    }]
  }
};

Key Fixes:

1. splitNumber: 5 → Generates cleaner ticks (0.2 intervals)
2. axisLabel.formatter → Displays 0.2 as 20%
3. Hide ticks + Optimize grid → Better readability
4. Add area fill → Enhanced data visibility

---