删除chartJS水平条形图中的零线

Question

我有一个水平条形图，看起来像这样：

它是用react-chartjs-2实现的：

import React from 'react';
import { HorizontalBar } from 'react-chartjs-2';
import 'chartjs-plugin-datalabels';
// import styled from 'styled-components';

const FunnelChart = () => {
  const data = {
    labels: ['Applicants', 'HS Test', 'Tech Test', 'Internship', 'Contract', 'Hired'],
    datasets: [{
      type: 'horizontalBar',
      backgroundColor: ['#d5d5d5', '#d9e3df', '#c0d4cd', '#a7c5ba', '#8fb5a7', '#78a795'],
      data: [80, 50, 20, 15, 10, 5],
      datalabels: {
        anchor: 'start',
      },
    }, {
      type: 'horizontalBar',
      backgroundColor: ['#d5d5d5', '#d9e3df', '#c0d4cd', '#a7c5ba', '#8fb5a7', '#78a795'],
      data: [-80, -50, -20, -15, -10, -5],
      datalabels: {
        display: false,
      },
    }],

  };
  const options = {
    legend: { display: false },
    plugins: {
      datalabels: {
        color: 'white',
        font: {
          weight: 'bold',
        },
        title: false,
      },
    },
    scales: {
      xAxes: [{
        display: false,
        stacked: true,
        gridLines: {
          display: false,
          drawBorder: false,
        },
      }],
      yAxes: [{
        categoryPercentage: 1.0,
        barPercentage: 0.95,
        stacked: true,
        gridLines: {
          display: false,
          drawBorder: false,
        },
      }],
    },
  };

  return (
    <div>
      <HorizontalBar data={data} options={options} />
    </div>
  );
};

export default FunnelChart;

如您所见，每个小节的中心都有一条白色（或空白）线。所以问题是：如何删除它？我无法使用zeroLineColor选项，因为栏颜色不同

Answer 1

根据他们的docs，将yAxes的zeroLineWidth设置为0。

编辑：根据他们的docs，将xAxes的zeroLineWidth设置为0。