I have a list of stacked, horizontal bar charts that I want to all be the same width.
Each canvas is the same width, and each chart uses the same config (with different data sets, of course).
I've tested a lot of different configuration options, from barPercentage, to categoryPercentage, to setting fullWidth on the Y-Axis.
What am I missing?
this.chartConfig = {
type: 'horizontalBar',
data: {
labels: this.labels,
datasets: [
{
backgroundColor: this.colors,
data: this.data,
},
highlight_dataset,
],
},
options: {
responsive: true,
title: { display: false },
legend: { display: false },
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
},
scales: {
xAxes: [
{
display: false,
stacked: true,
},
],
yAxes: [
{
display: false,
stacked: true,
beforeFit: (scaleInstance: any) => {
scaleInstance.fullWidth = true;
},
},
],
},
events: ['mousemove'],
onHover: (event: any, chartElement: any) => {
event.target.style.cursor = chartElement && chartElement[0] ? 'pointer' : 'default';
},
tooltips: {
filter: (tooltipItem: any) => {
return tooltipItem.datasetIndex === 0;
},
},
},
};
from Chart JS - Horizontal Bar Chart Not Filling Canvas

No comments:
Post a Comment