0

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.

Leeroy
  • 2,003
  • 1
  • 15
  • 21

2 Answers2

0

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]);
});
Leeroy
  • 2,003
  • 1
  • 15
  • 21
0

You can customize the legend by setting the legendMarker and legendItem objects inside the series objects (where values are placed). This way you can customize the legend marker and item for each individual series. We do not have to use rules and should avoid rules if possible for efficiency.

Here is a demo to show you how to set this up: https://demos.zingchart.com/view/064CFFCD

Norman Kang
  • 65
  • 2
  • 7
  • Thanks for the demo! I try to avoid mixing data and styling and instead of using `series` I load data from csv files. Can I still manipulate it like in the demo if it's loaded from a CSV? Should I make a different question about parsing `csv`? – Leeroy Mar 22 '18 at 23:07
  • 1
    Yes, you can manipulate the chart the same way as in the demo if you are using CSV loaded data. Here is more information on how to use CSV files to load data into ZingChart: https://www.zingchart.com/docs/tutorials/loading-data/parsing-csv-files/. You will notice that you can manipulate the chart even if csv files are used to load data. – Norman Kang Mar 23 '18 at 22:42