Stacked Bar: De-emphasize one of the bars?

[errantmind]

Hello,

I have a horizontal stacked bar chart with 3 bars. I'd like one of the bars (rightmost) to be de-emphasized as it is less important. One idea I had was to make the fill of the particular bar transparent with only a border. Another idea would be to have just a point marking the extent of the particular bar, instead of a bar. Are either of these feasible? Any other ideas?

[rokotyan]

@errantmind Yes, that's doable. You can apply some attribute to that bar by using currently undocumented attributes feature, and using it to apply certain style. Here's an example using React:

CSS:

.chart g[fade] {
  fill-opacity: 0.25;
  --vis-grouped-bar-fill-color: none;
  --vis-grouped-bar-stroke-color: #985353;
  --vis-grouped-bar-stroke-width: 1px;
  stroke-dasharray: 2 2;
}

JSX:

<VisXYContainer className=".chart" ...>
  <VisGroupedBar
    ...
    attributes={{
      [GroupedBar.selectors.barGroup]: {
        fade: (d, i) => i === 2 ? '' : null, // Apply the "fade" attribute to the third bar group
      },
  }}/>
   ...
</VisXYContainer>

[errantmind]

Thanks, this led me in the right direction. I actually needed to modify the individual stacked bars and, using something similar to your response I was able to do it:

[StackedBar.selectors.bar]: {
    fade: (d, i) => {
       if (i % 3 === 2) {
          return '';
       } else {
          return null;
       }
    }
 },