Удалить зеролин на графике - PullRequest
Новая
       24

Удалить зеролин на графике

0 голосов
/ 10 октября 2018

У меня есть горизонтальная гистограмма, которая выглядит следующим образом: enter image description here

Это реализовано с response-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, так как у меня разные цвета бара

1 Ответ

0 голосов
/ 10 октября 2018

Согласно их документам , установите zeroLineWidth для yAxes равным 0.

РЕДАКТИРОВАТЬ: Согласно их документам , установите zeroLineWidth для xAxes равным 0.

...