Problems with dhtmlx-bootstrap interaction

Suite and Optimus Suite 5
#1

Hello,
I’ve got an issue concerning the DHTMLX Chart Legend.
I am using dhtmlx and bootstrap stylesheets and the following problem occurs: I have two series, 2015(green) and 2014(blue). When clicking at one of the legend options the item becomes grey and is unable to make it visible again. Also its position changes (picture).


When I remove bootstrap.css the legend works properly.
Is there a way to keep bootstrap in the app and get a working legend anyway?
Thanks in advance for helping!
Arne

#2

Hello,

Try to add the following css on the page:

<style> .dhx_chart * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .dhx_chart canvas, .dhx_chart_legend_item.hidden { display: block !important; } </style>

#3

Hello Alexandra,
thanks for your reply, the legend looks better now. But somehow the functionality was lost somewhere in the Baltic Sea: When I click a legend item the chart remains stable.

But no worries, I recently build a solution using external selectboxes and show/hideseries methods. That also works fine.
Best wishes from Germany,
Arne

#4

Hello Arne,

Yes, my previous solution does not allow to hide series. Here is the updated styles:

[code]

.dhx_chart * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .dhx_chart canvas{ display: block; } .dhx_chart_legend_item.hidden { display: block !important; } [/code]

Kind regards

#5

Hello Alexandra,
very impressive, your code snippet works properly! Thanks a lot and best regards,
Arne