Help with stacked horizontal bar chart - removing zero line from the bar.

[johnrails]

My team just updated our chart.js package, but prior to the upgrade i was able to create a stacked horizontal bar chart without a zero line dividing the positive and negative datasets. However, after upgrading it appears that this is a new feature. We are using the react-chartjs wrapper to build our charts, and this is what the chart looks like:

This is the code after trying a variety of options:

const chartData = {
    labels,

    datasets: [
      {
        type: 'horizontalBar',
        backgroundColor: 'rgb(0, 113, 206)',
        data: metricValues,
      },
      {
        type: 'horizontalBar',
        backgroundColor: 'rgb(0, 113, 206)',
        data: offsetValues,
      },
    ],
  };

  const options = {
    legend: { display: false },
    tooltips: { enabled: false },
    maintainAspectRatio: false,
    hover: { mode: null },
    scales: {
      xAxes: [
        {
          display: true,
          stacked: true,
          ticks: {
            callback: () => '',
          },
          gridLines: {
            color: 'transparent',
            display: true,
            drawTicks: false,
            drawBorder: false,
            offsetGridlines: true,
            zeroLineColor: 'transparent',
          },
        },
      ],
      yAxes: [
        {
          ticks: {
            fontSize: 16,
            fontFamily: 'bogle',
          },
          stacked: true,
          gridLines: {
            display: false,
          },
        },
      ],
    },
  };

I've tried a number of different gridline option changes, as well as dataset configurations, and i can't seem to remove that line at 0 in the bar chart.

This is a screen shot of a rendering in Chrome. Firefox renders the chart with the same zero line.

I would appreciate any leads on how to fix this.

[johnrails]

i just figured out a workaround. if anyone else is having this same problem i basically added some border to the dataset and added borderSkipped: "false". You're border color should be the same color as your background color.

[etimberg]

Still reproduces in v3.0.0-beta.4 https://jsfiddle.net/4vat2d1w/