0


I am creating Horizontal Bar Graphs on a HTML5 webpage using JS RGraph. The text of the labels turns out very blurry unless you set the textAccessible attribute to true. This attribute uses absolute coordinates on the page.

My issue (text labels plotted on top of each other) arises when I try to create a graph hidden underneath a navigation tab (I use bootstrap and custom CSS code). The tab needs to be active (style="display:flex") on page load for the graph to be drawn correctly, but it is not the main tab and therefore cant be given the active attribute. If the tab is not active on page load (style="display:none") the labels are not drawn correctly (as there are no coordinates yet I assume).

Is there any way to work around this issue? I've tried to ReDraw the Graph whenever the tab turns active, but I couldn't get it to work. I've added part of the code below:

html code with tab inactive
<div class="tab-pane fade" id="nav-5" role="tabpanel" aria-labelledby="nav-5-tab"> <canvas id="hbar1" width="450" height="300">[No canvas support]</canvas> </div>

html code with tab active
<div class="tab-pane fade active" id="nav-5" role="tabpanel" aria-labelledby="nav-5-tab"> <canvas id="hbar1" width="450" height="300">[No canvas support]</canvas> </div>

JS code of HBar Graph
hbar1 = new RGraph.HBar({ id: 'hbar1', data: data1, options: { backgroundGrid: false, xaxis: false, xaxisScaleMax: 100, xaxisScaleDecimals: 1, xaxisScale: false, labelsAboveUnitsPost: '%', colors: ['#019b91'], yaxisLabels: labels1, yaxisTickmarksCount: 0, labelsAbove: true, textAccessible: true } }).wave();

MarijnO
  • 1

1 Answers1

0

Try resetting the canvas before you draw the chart (every time the tab is shown).

RGraph.reset(hbar1.canvas);
Richard
  • 4,809
  • 3
  • 27
  • 46
  • Thanks for the answer. Helped me further, but not quite there. I played around with the reset code, but it still only functions properly after clicking the tab a second time. I am now trying to implement a wait for tab-content to load function, but it returns canvas is null when I do this. I'll keep trying as there are more questions around here with that issue. Regards, Marijn – MarijnO Jun 04 '20 at 10:11