Webix Chart Legend toggle not working

Webix JS
1

When user clicks on the legend, the markers disappear. I’ve tested this using this exact example (https://snippet.webix.com/58c29ed8).

I think the issue is related to css, but I’m not sure. Has anyone experienced this and do you have a workaround?

Thanks

2

I figured it out… It happens when I use bootstrap. Is there a way around this?

3

Yep, Bootstrap resets styles globally for all elements on the page. As result, some widgets may not work correctly.

However, it can be easily resolved by adding extra rules to Webix widgets to get their styles back. For chart legend, please inspect DIVs with “webix_chart_legend” and “webix_chart_legend_item” class names.

4

Thanks Helga

5

I am facing the same problem, Can you please explain how to fix this issue ? @twigz @Helga

6

I was able to fix by adding some override css for hidden items,

.webix_chart_legend_item.hidden {
color: #cfd5dd !important;
display: block !important;
}