Grey out marker in legend when custom image used

[pawelfus]

Description of the feature

When using images instead of SVG shapes in legend, clicking on legend item does not grey out the image: jsFiddle demo - it works fine for the first and last series, does not work for Series 2 and Series 3.

Library related to the feature

Highcharts (all)

Proof of Concept/Live example for the feature

We can use SVG filters to achieve that: https://jsfiddle.net/BlackLabel/r57poxdn/

Snippet:

  chart: {
    events: {
      load: function() {
        var r = this.renderer;

        // Create filter
        var filter = r.definition({
          tagName: 'filter',
          id: 'grayscale',
          children: [{
            tagName: 'feColorMatrix',
            type: 'matrix',
            values: '0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'
          }]
        });

        // Append CSS to the elements:
        const style = document.createElement('style');
        style.textContent = `
            .highcharts-legend-item-hidden image {
                filter: url(#grayscale);
            }
        `;
        document.head.append(style);
      }
    }
  },

---

You can vote for this feature by a adding thumbs-up reaction to this post.

[skuske]

@pawelfus

Thanks for logging this. Isn't that more a bug than an additional feature request?

[pawelfus]

You're welcome @skuske

I don't think so. Our API for styling a hidden series' legend item is a subset of CSS options: https://api.highcharts.com/highcharts/legend.itemHiddenStyle and it's only setting {"color": "#cccccc"}. That option does not work with images (not in Highcharts, in general).

I understand, one may consider this as a bug; it's inconsistent across different ways to define a marker. That means we should then report this, for example to Chrome developers, and say that setting color: grey in CSS does not render images in greyscale. I'm afraid we are not gonna get this anytime soon :)

[pawelfus]

Just a side node: I think it's a good idea, that's why I created this idea here. Something like color: "greyscale" pseudo color, that we could translate (under the hood) into the filter example above.

[skuske]

I understand that and I totally agree. Thanks for providing the iOS workaround!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

[pawellysy]

unstale