chartjs / chartjs/Chart.js

Vertical bar chart - Prevent two bars merging as one bar when dates are the same and y values are different

Open
#9,080 7 comments 3 reactions 0 assignees View on GitHub
type: enhancement
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

## Expected Behavior
2 bars not merge into 1 bar

## Current Behavior
2 bars merging into 1 bar

## Possible Solution

## Steps to Reproduce
I have an issue where two bars merge as one bar when the dates are the same. I don't mind the x tick label merging as one date, but the actual bars I would like to keep separate.

My chart configuration:

```
var myChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: chartDatasets
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
stacked: true,
offset: true,
type: 'timeseries',
time: {
parser: 'YYYY-MM-DD',
tooltipFormat: 'll',
unit: 'day',
displayFormats: {
day: 'MMM D'
},
},
ticks: {
source: 'data',
align: 'center',
},
grid: {
drawOnChartArea: false
},
},
y: {
stacked: true,
type: 'linear',
ticks: {
beginAtZero: true
},
title: {
display: true,
text: 'kg Dry Matter / ha',
font: {
weight: "bold"
}
}
}
}
}
});
```

I have created a JSFiddle to duplicate the problem.

[jsfiddle](https://jsfiddle.net/kharrisson/pc359Lg4/10/)

In the first dataset provided to the chart, there are 2 "May 18" records with different y values. Why have they merged into one bar? I am unsure if this is a bug, or if there is a config setting I need to set.

## Context
2 datasets that form a stacked bar chart, x axis is timeseries and y axis is linear

## Environment
v3.2.1 & 3.2.0
moment.js 2.29.1
chartjs-adapter-moment 1.0
Chrome v90.0.4430.212 (Official Build) (64-bit)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.