ChartJS Stacked Bar Chart transparent gaps

问题

I have been racking my brain on this for days now, starting to think its a bug in the chartJS package? When I setup a stacked bar chart, even with a pretty simple options config, I tend to get very slim transparent gaps between the bar data itself. The more data you have in the bar, the more apparent it becomes. I've isolated it completely out of my code (we're using React and react-chartjs-2, but i=I've recreated it using vanilla ChartJS, latest version).

In my example here, I've turned all the bar data to black, and put it on a red background, with a hover border of white. If you look close you'll see vertical lines of red between the bars (ie: we're seeing through the bars themselves to the red background) and the white hover border never triggers on the left side.

Any ideas as to if this may be a data issue, or an options setting I haven't messed with yet, or possibly a bug in the package? The chart we are rendering this with is using thousands of data points and it starts to look like a broken gradient with all the subpixel transparent lines showing up. Any assistance would be greatly appreciated, thanks!

Here's some quick demo code i've put in a JSFiddle as an example:

var barOptions_stacked = {
  scales: {
    xAxes: [
      {
        ticks: {
          fontColor: "#FFF"
        },
        stacked: true,
      },
    ],
    yAxes: [
      {
        ticks: {
          fontColor: "#FFF"
        },
        stacked: true,
      },
    ],
  },
};

var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ['2014', '2013'],
    datasets: [
      {
        label: "one",
        data: [100,200],
        backgroundColor: 'black',
        hoverBorderColor: '#FFFFFF',
      },
      {
        label: "two",
        data: [300, 400],
        backgroundColor: 'black',
        hoverBorderColor: '#FFFFFF',
      }
    ],
  },
  options: barOptions_stacked,
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<div style="background-color: red">
  <canvas id="ctx"></canvas>
</div>

Here is a JSFiddle example, if you really expand the chart view up you'll see the lines in play.

JSFiddle Example

Bar Chart Example Img

回答1:

Remove this stacked: false, from xAxes to solve this issue. Anyway black on black (Or any other color) ==> veryyyyyyy very not friendly data visualization.

About the line himself - this is more a GitHub issue (No way to solve this her).

var barOptions_stacked = {
  scales: {
    xAxes: [
      {
        ticks: {
          fontColor: "#FFF"
        },
        stacked: false,
      },
    ],
    yAxes: [
      {
        ticks: {
          fontColor: "#FFF"
        },
        stacked: true,
      },
    ],
  },
};

var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ['2014', '2013'],
    datasets: [
      {
        label: "one",
        data: [100,200],
        backgroundColor: 'black',
        hoverBorderColor: '#FFFFFF',
      },
      {
        label: "two",
        data: [300, 1100],
        backgroundColor: 'black',
        hoverBorderColor: '#FFFFFF',
      }
    ],
  },
  options: barOptions_stacked,
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<div style="background-color: red">
  <canvas id="ctx"></canvas>
</div>

For bar type "black on black" you should set the yAxes to false.

来源：https://stackoverflow.com/questions/61093288/chartjs-stacked-bar-chart-transparent-gaps

标签

javascript

reactjs

charts

chart.js

react-chartjs