chartjs / chartjs/Chart.js

Bar chart has border artifacts

Open
#9,906 8 comments 1 reaction 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

## Expected Behavior
Bar chart with borderWidth = 0 has no border. The bar itself should be a solid block of the chosen color.
Bar chart with borderWidth > 0 should have a border in the chosen color, but no other lines/colors.

## Current Behavior
Bar chart has some kind of border, when borderWidth = 0:
![Screenshot Border](https://user-images.githubusercontent.com/84020239/143547609-e77272c1-1d1d-4824-9e02-ac0868aa71c5.png)
https://codepen.io/nwi4/pen/KKvOdbW

Bar chart has some other lines around the border, with borderWidth > 0:
![Screenshot Border 2](https://user-images.githubusercontent.com/84020239/143550114-b0bc37c8-2c1b-4d92-83b9-e92beabf6d3f.png)
https://codepen.io/nwi4/pen/mdMNBJw

Are there some settings I am missing to tweak this behavior?

## Context
When stacking multiple (small) bars on each other, the unwanted lines blur the edges and it looks more like a gradient than multiple distinct bars:
![Bar](https://user-images.githubusercontent.com/84020239/143551652-089e8bd8-d48d-40a0-bb7e-6d13dbc8791e.png)
There are 2 big bars, and 3 very small bars, which looks like the fade out of the bigger one before.

## Environment

* Chart.js version: 3.6.0
* Browser name and version: Chrome 96

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.