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:
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.
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:
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.