React Apex Chart配置需求：仅显示最右侧蓝色预测值168.23

问题需求 #

使用React Apex Chart实现预测面积图时，仅在图表最右侧以蓝色显示预测值（如168.23），其余图表元素（线条、填充、坐标轴等）全部隐藏。

解决方案 #

通过调整图表配置和数据处理逻辑，只渲染目标预测点并隐藏所有无关元素，具体实现如下：

1. 调整数据处理 #

保留历史数据或仅传入预测值均可，后续通过配置控制显示：

useEffect(() => {
    axios.get(`${process.env.REACT_APP_API_URL}/${symbol}/${ex}/`, Config())
        .then(response => {
            const targetPrice = return_strong_num(response.data.analystRatings.TargetPrice);
            setSeries([{
                name: 'Price',
                data: [...response.data.prices.map(item => return_strong_num(item)), targetPrice]
            }])
            setDates([...response.data.dates, response.data.future_date])
            setLoading(false)
        })
        .catch(err => console.log(err.message()))
}, [code, exchange])

2. 修改图表配置 #

重点隐藏无关元素，单独高亮最后一个预测点：

const options = {
    chart: {
        width: '100%',
        type: 'area',
        foreColor: 'transparent',
        toolbar: { show: false },
        sparkline: { enabled: true } // 快速隐藏默认坐标轴、网格等
    },
    grid: { show: false },
    stroke: { width: 0 }, // 隐藏面积图线条
    yaxis: { show: false },
    xaxis: { show: false },
    fill: { opacity: 0 }, // 隐藏面积图填充色
    markers: {
        size: 0, // 默认隐藏所有标记点
        // 仅为最后一个预测点自定义样式
        customHTML: ({ seriesIndex, dataPointIndex, w }) => {
            if (dataPointIndex === w.globals.series[seriesIndex].length - 1) {
                return `<div style="width:14px;height:14px;border-radius:50%;background:#007bff;display:flex;align-items:center;justify-content:center;color:white;font-size:12px;padding:2px;">${w.globals.series[seriesIndex][dataPointIndex]}</div>`;
            }
            return '';
        }
    },
    tooltip: { enabled: false }
}

3. 渲染图表 #

保持原有渲染逻辑：

<ReactApexChart options={options} series={series} type={'area'}/>

关键说明 #

• 启用sparkline.enabled快速隐藏坐标轴、网格等默认元素
• 通过stroke.width:0和fill.opacity:0彻底隐藏面积图的线条与填充
• 利用markers.customHTML自定义最后一个预测点的蓝色圆点+数值样式
• 若无需历史数据，可直接在series.data中仅传入预测值，简化数据处理

内容的提问来源于stack exchange，提问作者ahsan mukhtar