Expected Behavior
A stacked bar chart, i.e. a bar chart with
options: { ... scales: {xAxes: [{ stacked: true }], yAxes: [{ stacked: true }] } ... }
should display borders around the bars if borderColor is set.
Current Behavior
## Steps to Reproduce (for bugs)
type: "bar",
data: {
labels: ["9/16/2016", "6/21/2017", "12/21/2017"],
datasets: [
{data: [10, 20, 38], label: "Transcriptomic",
backgroundColor: ['rgba(54, 162, 235, 0.2)','rgba(54, 162, 235, 0.2)','rgba(54, 162, 235, 0.2)','rgba(54, 162, 235, 0.2)'],
borderColor: ['rgba(54, 162, 235, 1)','rgba(54, 162, 235, 1)','rgba(54, 162, 235, 1)','rgba(54, 162, 235, 1)'] },
{data: [9, 19, 37], label: "Epigenomic",
backgroundColor: ['rgba(255, 159, 64, 0.2)','rgba(255, 159, 64, 0.2)','rgba(255, 159, 64, 0.2)','rgba(255, 159, 64, 0.2)'],
borderColor: ['rgba(255, 159, 64, 1)','rgba(255, 159, 64, 1)','rgba(255, 159, 64, 1)','rgba(255, 159, 64, 1)'] },
{data: [10, 20, 38], label: "Proteomic",
backgroundColor: ['rgba(153, 102, 255, 0.2)','rgba(153, 102, 255, 0.2)','rgba(153, 102, 255, 0.2)','rgba(153, 102, 255, 0.2)'],
borderColor: ['rgba(153, 102, 255, 1)','rgba(153, 102, 255, 1)','rgba(153, 102, 255, 1)','rgba(153, 102, 255, 1)'] },
{data: [0, 19, 28], label: "Imaging",
backgroundColor: ['rgba(255, 99, 132, 0.2)','rgba(255, 99, 132, 0.2)','rgba(255, 99, 132, 0.2)','rgba(255, 99, 132, 0.2)'],
borderColor: ['rgba(255,99,132,1)','rgba(255,99,132,1)','rgba(255,99,132,1)','rgba(255,99,132,1)'] }
]
},
options: {
title: { display: true, text: "Data Releases", fontSize: 24 },
scales: {xAxes: [{ stacked: true }], yAxes: [{ stacked: true }] } // Convoluted way of saying "stacked bar chart please"
}
Environment
- Chart.js version: Pulled it down about a week ago.
- Browser name and version: Chrome 54
it seems like adding
borderWidthhas solved the problem. The reason I was confused is I didn’t set the borderWidth for my doughnut chart. I think perhaps there should be a default borderWidth if a borderColor is set, similarly to doughnut charts?