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

Area Charts : Fill color isn't applied when color is rgb() #4742

Closed
Slokilla opened this issue Oct 3, 2024 · 3 comments · Fixed by #4759
Closed

Area Charts : Fill color isn't applied when color is rgb() #4742

Slokilla opened this issue Oct 3, 2024 · 3 comments · Fixed by #4759

Comments

@Slokilla
Copy link

Slokilla commented Oct 3, 2024

Description

When using a rgb() color, the filling in the graph does not take into account the opacity.

Steps to Reproduce

  1. Use this fill objet :
 {
        colors: ['rgb(236, 22, 26)'],
        opacity: [0.1],
        type: 'solid'
 }

See that the graph is full opaque.
2. Replace the color by the exact same hexadecimal color :

 {
        colors: ['#EC1A16'],
        opacity: [0.1],
        type: 'solid'
 }

See that this time, the graph is not opaque.

Expected Behavior

The graph should not be opaque.

Actual Behavior

Screenshots

With rgb :

image

With hex :

image

Reproduction Link

With rgb : https://codepen.io/slokilla/pen/bGXpBge

With hexa : https://codepen.io/slokilla/pen/LYwNbbM

@Slokilla Slokilla added the bug Something isn't working label Oct 3, 2024
@junedchhipa junedchhipa removed the bug Something isn't working label Oct 11, 2024
@junedchhipa
Copy link
Contributor

junedchhipa commented Oct 11, 2024

Not a bug, but a missing feature. You can convert the rgb to hex with a function like this

function rgb2hex(rgb) {
    rgb = rgb.match(
      /^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i
    )
    return rgb && rgb.length === 4
      ? '#' +
          ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) +
          ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2) +
          ('0' + parseInt(rgb[3], 10).toString(16)).slice(-2)
      : ''
  }

@rosco54
Copy link
Contributor

rosco54 commented Oct 14, 2024

Or use rgba() color format:

colors: ['rgba(236, 22, 26, 0.1)'],

@Slokilla
Copy link
Author

Mh, thanks for your answers. I do not understand in which scope it's not a bug. Actually, there is a reproducible way to have a not working fill opacity attribute. The minimal fix should be to update the documentation, adding that opacity works only with an hexadecimal color.

A more valuable fix should be to integrate opacity in an rgba() call and use it when color is rgb and opacity is given.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants