- Senior Boarder
- Posts: 40
You will have to give width and height in editor html in which you want to display chart because the div of article html in which chart have to display, have no width and height, so give width and height to in which div you want to display chart.
Unfortunately, we are unable to share the back end login/details, as this is on a working client website.
As you can see in my code below, there is an inline style being applied to the element (width:400px), despite having the width of the chart set in the back end to '100%'. This is output from the module code itself.
As I mentioned, the chart displays correctly when it is a menu item. However, when you are embedding the chart as a module (using the include vchart loadmodule plugin) it give it a static width of 400px.
I've attached screenshots that should show you that the output from loadmodule is buggy.
vchart1.jpg shows my chart settings: Width is set to 100%.
vchart2 shows the html markup output by the plugin (note the width:400px;)
vchart3 shows the parent container of the chart (note the available room, defined by the blue area)
vchart4 shows the size of the chart module.
I have no CSS conflicts, as no other components in my CSS file are using the vchart namespace.
I have noticed a similar bug: Using Percentage works when it is a Component Page.
However, when the chart is embedded in an article, it seems to ignore the percent.
I can see that the containing element of the chart gets a fixed with and height:
<div class="vchar_info"> <div id="vchart_1000" class="chart_div share_option"> <div style="position: relative;"> <div style="position: relative; width: 400px; height: 300px;" dir="ltr"> [CHART HERE] </div> </div> </div> </div>
I will send you a link. The page is currently being edited. However, it can be seen here that the chart does not adjust in width and goes beyond the edge.