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.
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]);
});