0

I have a horizontal bar chart which looks like this: enter image description here

It's implemented with 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;

As you can see, there is a white (or empty) line in the center of every bar. So the question is: how can I remove it? I cannot use zeroLineColor option as I have different bar colors

Artur Takoev
  • 127
  • 2
  • 11
  • Dirty hack will be, you can add the largest value in the data["datasets"][data] array to all your values. Only if you have a few datapoints – Shivam Gupta Oct 10 '18 at 15:27
  • Not working: I still need negative numbers and adding the highest number in dataset will get me an ordinary horizontal barchart, which means that the current shape will be lost – Artur Takoev Oct 11 '18 at 06:18
  • Your chart [works for me](https://i.stack.imgur.com/ALQPg.png) using Chart.js 2.7.2 and datalabels 0.4.0. Which versions are you using? – timclutton Oct 11 '18 at 12:03
  • Strange, I use latest versions too. Works in codepen, doesn't work on my machine. – Artur Takoev Oct 11 '18 at 15:02

1 Answers1

0

As per their docs, set the zeroLineWidth for yAxes to 0.

EDIT: As per their docs, set the zeroLineWidth for xAxes to 0.

Shivam Gupta
  • 1,198
  • 9
  • 10