In VitaraCharts, user can interact with legend elements to either show or hide or highlight particular category data within the chart. All the vitara charts that have legend option will support this interactive feature except ‘Packed bubble’, ‘Waffle’, ‘Calendar heatmap’ and ‘Mekko’ charts.
There are two kind of interactions that VitaraCharts support.

1. Click to hide

If there are three legend elements on the chart which represent three different data categories, and if you need to hide/exclude some categories from the chart, then just click on that particular legend element.
For example, below screenshot shows the bar chart with 3 metrics profit, cost and revenue. These three metrics are plotted with three different colors.
Now, we will hide two metrics ‘revenue’ and ‘profit’ from the chart to analyze the data only for ‘cost’. To do this we will click on the legend elements ‘revenue’ and ‘profit’. See the screenshot below:
Once the data is hidden, the hidden legend category names will be in disabled mode with grey colored text. And if we need to show the data again for ‘revenue’ and ‘profit’, then just click again on the respective legend elements.

2. Hover to highlight

When you hover onto any of the legend categories, then the data for that category will be highlighted and all other legend categories on the chart will be displayed with lesser opacity
For example, when we hover on to profit legend category, then the bars color for ‘revenue’ and ‘cost’ will be displayed with lesser opacity. See the screenshot below:

Formatting capabilities

With version, we’ve added new enhancement that let you wrap text in formatting for legends. The legends tab now includes three new options: Compact Fit, Max Width, and Trim.

  1. Compact Fit - This option is enabled by default, and it reduces the space between each legend, as well as the padding between symbols and legend text.



  1. Max width: will be used to adjust the legend width…if the text is too long, it will wrap to the next line.


  1. Trim - when combined with the Max-width option, the overflowing text is trimmed into ellipsis (“…”).