Add rules to legend items

Question

Is there a way I can address legend items individually?

I'd like to style them, make some appear smaller, some disabled, stuff like that. If I were to define a module/plugin, how would I manipulate the array of items?

legend: {
  item: {
    rules: []
  }
}

doesn't work.

Answer 1

Workaround based on SVG editing

This is a hacky solution that goes into the SVG markup and sets the attributes we want: 0.25 opacity and smaller marker radius.

⚠ It will break unless there's SVG rendering and round legend markers.
It also FAILS to work on legend_item_click event (it works too early and gets overridden afterwards).

let disableLegendItems = (arr) => {
  let markers = [...document.getElementById('chartDiv-graph-id0-legend-c').children],
  items = [...document.getElementsByClassName('zc-legend-item')];
  arr.map((i) => {
    markers[i].setAttribute('fill-opacity', '0.25');
    markers[i].setAttribute('r', '4');
    items[i].setAttribute('fill-opacity', '0.25');
  });
  console.warn(`Legend items at indexes ${arr} styled as disabled`);
};

zingchart.bind('demo-chart', 'load', function() {
  disableLegendItems([3, 7, 8, 9, 11, 13]);
});