admin管理员组文章数量:1391975
In your Chart.js bar chart, experiencing unwanted spacing between the labels Q1 and Q2 when the corresponding data values are 0. Even though the bars with 0 values are not visually displayed, Chart.js still reserves space for them, creating unnecessary gaps. You have already attempted to use null, undefined, and NaN to remove these spaces, but the issue persists. The goal is to ensure that Q1 and Q2 appear side by side without any empty space caused by 0 values, so the chart maintains a clean and compact appearance.
var app = angular.module("chartApp", ["chart.js"]);
app.controller("ChartController", function ($scope) {
$scope.chartJsProps = {
data: [
[100, null], [110, null], [200, null], [210, null], [210, null], [220, 0],
[0, 300], [null, 290], [null, 320], [null, 340], [null, 350], [null, 370]
],
type: "bar",
colors: [
"#803690", "#00ADF9", "#46BFBD", "#fb3b3b", "#FDB45C",
"#949FB1", "#4D5360", "#4cbfbc", "#98bbcc", "#ff8d30",
"#824670", "#dcdcdc"
],
labels: ["Q1", "Q2"],
labelsCol: "quarter",
series: [],
options: {
responsive: true,
maintainAspectRatio: true,
title: {
display: true,
text: "Chart",
position: "top"
},
legend: {
display: false,
position: "bottom",
labels: {
fontColor: "rgb(66, 66, 66)",
fontSize: 12,
padding: 10,
boxWidth: 40
}
},
layout: {
padding: 20
},
tooltips: {
enabled: true,
mode: "nearest",
intersect: true
},
elements: {
point: {
radius: 3,
hoverRadius: 4,
hitRadius: 2
}
},
scales: {
xAxes: [{
type: "category",
stacked: true,
categoryPercentage: 0.8,
barPercentage: 0.9,
gridLines: { display: false },
ticks: { fontSize: 11 }
}],
yAxes: [{
stacked: true,
gridLines: { display: false },
ticks: { fontSize: 11, fontColor: "#803690", beginAtZero: false }
}]
}
},
datasetOverride: [
{
label: "jan_actual(sum)",
type: "bar",
backgroundColor: "#803690",
yAxisID: "y-axis-0",
stack: "grp_A"
},
{
label: "jan_target(sum)",
type: "bar",
backgroundColor: "#00ADF9",
yAxisID: "y-axis-0",
stack: "grp_T"
},
{
label: "feb_actual(sum)",
type: "bar",
backgroundColor: "#46BFBD",
yAxisID: "y-axis-0",
stack: "grp_A"
},
{
label: "feb_target(sum)",
type: "bar",
backgroundColor: "#fb3b3b",
yAxisID: "y-axis-0",
stack: "grp_T"
},
{
label: "mar_actual(sum)",
type: "bar",
backgroundColor: "#FDB45C",
yAxisID: "y-axis-0",
stack: "grp_A"
},
{
label: "mar_target(sum)",
type: "bar",
backgroundColor: "#949FB1",
yAxisID: "y-axis-0",
stack: "grp_T"
},
{
label: "apr_actual(sum)",
type: "bar",
backgroundColor: "#4D5360",
yAxisID: "y-axis-0",
stack: "grp_Q2_A"
},
{
label: "apr_target(sum)",
type: "bar",
backgroundColor: "#4cbfbc",
yAxisID: "y-axis-0",
stack: "grp_Q2_T"
},
{
label: "may_actual(sum)",
type: "bar",
backgroundColor: "#98bbcc",
yAxisID: "y-axis-0",
stack: "grp_Q2_A"
},
{
label: "may_target(sum)",
type: "bar",
backgroundColor: "#ff8d30",
yAxisID: "y-axis-0",
stack: "grp_Q2_T"
},
{
label: "jun_actual(sum)",
type: "bar",
backgroundColor: "#824670",
yAxisID: "y-axis-0",
stack: "grp_Q2_A"
},
{
label: "jun_target(sum)",
type: "bar",
backgroundColor: "#dcdcdc",
yAxisID: "y-axis-0",
stack: "grp_Q2_T"
}
],
labelsColType: "category"
};
$scope.chartJsProps.data = $scope.chartJsProps.data.filter(dataSet =>
dataSet.some(value => value !== 0)
);
$scope.chartJsProps.options.scales.yAxes[0].ticks = {
suggestedMin: 1, // Ensure the minimum is not zero
callback: function (value) {
return value !== 0 ? value : null; // Hide zero values
}
};
$scope.chartJsProps.datasetOverride.forEach(dataset => {
dataset.spanGaps = true;
});
});<!DOCTYPE html>
<html lang="en" ng-app="chartApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AngularJS Chart</title>
<script src=".js/1.7.9/angular.min.js"></script>
<script src=".js/2.7.2/Chart.bundle.min.js"></script>
<script src=".js/1.1.1/angular-chart.min.js"></script>
</head>
<body ng-controller="ChartController">
<canvas
id="base" class="chart-base"
chart-click="onChartJsClick"
chart-data="chartJsProps.data"
chart-labels="chartJsProps.labels"
chart-colors="chartJsProps.colors"
chart-pause="'running'"
chart-dataset-override="chartJsProps.datasetOverride"
chart-options="chartJsProps.options"
chart-series="chartJsProps.series"
chart-type="chartJsProps.type">
</canvas>
<script src="app.js">
</script>
</body>
</html>In your Chart.js bar chart, experiencing unwanted spacing between the labels Q1 and Q2 when the corresponding data values are 0. Even though the bars with 0 values are not visually displayed, Chart.js still reserves space for them, creating unnecessary gaps. You have already attempted to use null, undefined, and NaN to remove these spaces, but the issue persists. The goal is to ensure that Q1 and Q2 appear side by side without any empty space caused by 0 values, so the chart maintains a clean and compact appearance.
var app = angular.module("chartApp", ["chart.js"]);
app.controller("ChartController", function ($scope) {
$scope.chartJsProps = {
data: [
[100, null], [110, null], [200, null], [210, null], [210, null], [220, 0],
[0, 300], [null, 290], [null, 320], [null, 340], [null, 350], [null, 370]
],
type: "bar",
colors: [
"#803690", "#00ADF9", "#46BFBD", "#fb3b3b", "#FDB45C",
"#949FB1", "#4D5360", "#4cbfbc", "#98bbcc", "#ff8d30",
"#824670", "#dcdcdc"
],
labels: ["Q1", "Q2"],
labelsCol: "quarter",
series: [],
options: {
responsive: true,
maintainAspectRatio: true,
title: {
display: true,
text: "Chart",
position: "top"
},
legend: {
display: false,
position: "bottom",
labels: {
fontColor: "rgb(66, 66, 66)",
fontSize: 12,
padding: 10,
boxWidth: 40
}
},
layout: {
padding: 20
},
tooltips: {
enabled: true,
mode: "nearest",
intersect: true
},
elements: {
point: {
radius: 3,
hoverRadius: 4,
hitRadius: 2
}
},
scales: {
xAxes: [{
type: "category",
stacked: true,
categoryPercentage: 0.8,
barPercentage: 0.9,
gridLines: { display: false },
ticks: { fontSize: 11 }
}],
yAxes: [{
stacked: true,
gridLines: { display: false },
ticks: { fontSize: 11, fontColor: "#803690", beginAtZero: false }
}]
}
},
datasetOverride: [
{
label: "jan_actual(sum)",
type: "bar",
backgroundColor: "#803690",
yAxisID: "y-axis-0",
stack: "grp_A"
},
{
label: "jan_target(sum)",
type: "bar",
backgroundColor: "#00ADF9",
yAxisID: "y-axis-0",
stack: "grp_T"
},
{
label: "feb_actual(sum)",
type: "bar",
backgroundColor: "#46BFBD",
yAxisID: "y-axis-0",
stack: "grp_A"
},
{
label: "feb_target(sum)",
type: "bar",
backgroundColor: "#fb3b3b",
yAxisID: "y-axis-0",
stack: "grp_T"
},
{
label: "mar_actual(sum)",
type: "bar",
backgroundColor: "#FDB45C",
yAxisID: "y-axis-0",
stack: "grp_A"
},
{
label: "mar_target(sum)",
type: "bar",
backgroundColor: "#949FB1",
yAxisID: "y-axis-0",
stack: "grp_T"
},
{
label: "apr_actual(sum)",
type: "bar",
backgroundColor: "#4D5360",
yAxisID: "y-axis-0",
stack: "grp_Q2_A"
},
{
label: "apr_target(sum)",
type: "bar",
backgroundColor: "#4cbfbc",
yAxisID: "y-axis-0",
stack: "grp_Q2_T"
},
{
label: "may_actual(sum)",
type: "bar",
backgroundColor: "#98bbcc",
yAxisID: "y-axis-0",
stack: "grp_Q2_A"
},
{
label: "may_target(sum)",
type: "bar",
backgroundColor: "#ff8d30",
yAxisID: "y-axis-0",
stack: "grp_Q2_T"
},
{
label: "jun_actual(sum)",
type: "bar",
backgroundColor: "#824670",
yAxisID: "y-axis-0",
stack: "grp_Q2_A"
},
{
label: "jun_target(sum)",
type: "bar",
backgroundColor: "#dcdcdc",
yAxisID: "y-axis-0",
stack: "grp_Q2_T"
}
],
labelsColType: "category"
};
$scope.chartJsProps.data = $scope.chartJsProps.data.filter(dataSet =>
dataSet.some(value => value !== 0)
);
$scope.chartJsProps.options.scales.yAxes[0].ticks = {
suggestedMin: 1, // Ensure the minimum is not zero
callback: function (value) {
return value !== 0 ? value : null; // Hide zero values
}
};
$scope.chartJsProps.datasetOverride.forEach(dataset => {
dataset.spanGaps = true;
});
});<!DOCTYPE html>
<html lang="en" ng-app="chartApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AngularJS Chart</title>
<script src="https://cdnjs.cloudflare/ajax/libs/angular.js/1.7.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare/ajax/libs/angular-chart.js/1.1.1/angular-chart.min.js"></script>
</head>
<body ng-controller="ChartController">
<canvas
id="base" class="chart-base"
chart-click="onChartJsClick"
chart-data="chartJsProps.data"
chart-labels="chartJsProps.labels"
chart-colors="chartJsProps.colors"
chart-pause="'running'"
chart-dataset-override="chartJsProps.datasetOverride"
chart-options="chartJsProps.options"
chart-series="chartJsProps.series"
chart-type="chartJsProps.type">
</canvas>
<script src="app.js">
</script>
</body>
</html>enter code here
1 Answer
Reset to default 1In each category/label, there should be only 2 series.
Modify the stack value in the datasetOverride so that it will only be either 'A' (actual) or 'T' (target).
datasetOverride: [
{
label: 'jan_actual(sum)',
type: 'bar',
backgroundColor: '#803690',
yAxisID: 'y-axis-0',
stack: 'A',
},
{
label: 'jan_target(sum)',
type: 'bar',
backgroundColor: '#00ADF9',
yAxisID: 'y-axis-0',
stack: 'T',
},
{
label: 'feb_actual(sum)',
type: 'bar',
backgroundColor: '#46BFBD',
yAxisID: 'y-axis-0',
stack: 'A',
},
{
label: 'feb_target(sum)',
type: 'bar',
backgroundColor: '#fb3b3b',
yAxisID: 'y-axis-0',
stack: 'T',
},
{
label: 'mar_actual(sum)',
type: 'bar',
backgroundColor: '#FDB45C',
yAxisID: 'y-axis-0',
stack: 'A',
},
{
label: 'mar_target(sum)',
type: 'bar',
backgroundColor: '#949FB1',
yAxisID: 'y-axis-0',
stack: 'T',
},
{
label: 'apr_actual(sum)',
type: 'bar',
backgroundColor: '#46BFBD',
yAxisID: 'y-axis-0',
stack: 'A',
},
{
label: 'apr_target(sum)',
type: 'bar',
backgroundColor: '#4cbfbc',
yAxisID: 'y-axis-0',
stack: 'T',
},
{
label: 'may_actual(sum)',
type: 'bar',
backgroundColor: '#98bbcc',
yAxisID: 'y-axis-0',
stack: 'A',
},
{
label: 'may_target(sum)',
type: 'bar',
backgroundColor: '#ff8d30',
yAxisID: 'y-axis-0',
stack: 'T',
},
{
label: 'jun_actual(sum)',
type: 'bar',
backgroundColor: '#824670',
yAxisID: 'y-axis-0',
stack: 'A',
},
{
label: 'jun_target(sum)',
type: 'bar',
backgroundColor: '#dcdcdc',
yAxisID: 'y-axis-0',
stack: 'T',
},
]
Demo @ StackBlitz
本文标签：
版权声明：本文标题：javascript - Remove Spacing from the bars for Q1 and Q2 I am using chartjs version 2.7.2 and angular chart js version 1 - Stack 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744715277a2621365.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论