Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unexpected border lines around bar elements #6967

Closed
narlack opened this issue Jan 16, 2020 · 1 comment · Fixed by #6972
Closed

Unexpected border lines around bar elements #6967

narlack opened this issue Jan 16, 2020 · 1 comment · Fixed by #6972
Milestone

Comments

@narlack
Copy link

narlack commented Jan 16, 2020

Expected Behavior

Chart.js drawing bar element without unexpected border lines

Current Behavior

Chart.js drawing bar element with border lines in the versions started from 2.8.0 (version 2.7.3 is okey)

Steps to Reproduce (for bugs)

Context

Environment

  • Chart.js version: >2.8.0
  • Browser name and version: Chrome 79 (79.0.3945.117) & IE 11
  • Configuration:
{
  type: 'bar',
  data: {
    labels: ['Dateset 1', 'Dateset 2', 'Dateset 3', 'Dateset 4', 'Dateset 5'],
    datasets: [
    {
      label: 'green',
      data: [308.38, 265.49, 272.79, 306.44, 336.44],
      backgroundColor: 'green',
      borderColor: 'white',
      borderSkipped: false,
      borderWidth: 6,
      hoverBorderWidth: 6
    },
    {
      label: 'red',
      data: [391.4, 427.41, 296.67, 351.51, 380.83],
      backgroundColor: 'red',
      borderColor: 'white',
      borderSkipped: false,
      borderWidth: 6,
      hoverBorderWidth: 6
    },
    {
      label: 'black',
      data: [386.08, 512.74, 331.05, 380.83, 445.68],
      backgroundColor: 'black',
      borderColor: 'white',
      borderSkipped: false,
      borderWidth: 6,
      hoverBorderWidth: 6
    },
    {
      label: 'blue',
      data: [340.7, 568.65, 454.08, 284.27, 640.98],
      backgroundColor: 'blue',
      borderColor: 'white',
      borderSkipped: false,
      borderWidth: 6,
      hoverBorderWidth: 6
    },
    {
      label: 'rebeccapurple',
      data: [280.79, 595.62, 516.52, 379.53, 735.92],
      backgroundColor: 'rebeccapurple',
      borderColor: 'white',
      borderSkipped: false,
      borderWidth: 6,
      hoverBorderWidth: 6
    }
  ]
}

If it's planned behavior, although line looks strange. Lines aren't drawing on the all sides always.

@kurkle
Copy link
Member

kurkle commented Jan 17, 2020

On a side note, instead of using white borders to get padding to bars, you can use various options to control the bar sizes: https://www.chartjs.org/docs/latest/charts/bar.html#dataset-configuration

@etimberg etimberg added this to the Version 3.0 milestone Jan 18, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants