react-chartjs-2折线图：实现线条粗细与填充样式独立设置

当然可以将线条样式和渐变填充分开设置，你只需要调整两个关键配置项即可实现需求：

• 将borderColor设置为不透明的纯色（避免半透明颜色与填充渐变叠加导致线条出现渐变效果）
• 增大borderWidth的值，达到你想要的线条粗细

修改后的完整代码如下：

function getGradient(ctx, chartArea) {
  let gradient = ctx.createLinearGradient(
    0,
    chartArea.bottom,
    0,
    chartArea.top,
  );
  gradient.addColorStop(0.9, "#5A9EF566");
  gradient.addColorStop(0.4, "#5A9EF52F");
  gradient.addColorStop(0, "#5A9EF500");
  return gradient;
}

const apiRespnose = [
    {
      timestamp: "08:24",
      orderCount: "95",
    },
    {
      timestamp: "08:25",
      orderCount: "107",
    },
    {
      timestamp: "08:26",
      orderCount: "105",
    }];

const data = {
  labels: apiRespnose.map((e) => e.timestamp),
  datasets: [
    {
      label: "No of orders",
      data: apiRespnose.map((e) => Number(e.orderCount)),
      // 改为不透明的纯色，避免和填充渐变叠加
      borderColor: "#5A9EF5",
      pointStyle: "circle",
      fill: true,
      backgroundColor: function (context) {
        const chart = context.chart;
        const { ctx, chartArea } = chart;
        if (!chartArea) return;
        return getGradient(ctx, chartArea);
      },
      // 增大线条宽度，匹配期望效果
      borderWidth: 3,
    },
  ],
}

<LineChart data={data} />

改动说明： #

1. borderColor调整：原代码中borderColor使用了带透明度的#5A9EF566，会和下方的渐变填充叠加，让线条看起来带有渐变质感。改为不透明的#5A9EF5后，线条会呈现清晰的纯色样式。
2. borderWidth调整：将数值从2增大到3（可根据实际视觉效果微调），就能实现你期望的加粗线条效果。

这样修改后，渐变填充只会作用于折线下方的区域，线条则保持独立的纯色加粗样式，完全匹配你的期望效果。

内容的提问来源于stack exchange，提问作者Rajkumar Somasundaram