I'm seeing something strange with highchart.
I hope someone else got a fix for it.
When i first draw my chart it doesn't fill the entire parent container. (space between the chart and the next container):
If I let it draw again it looks as it should. (space between the chart and the next container):
I think the problem is the way it calculates the width.
The width isn't defined by me but by the container.
Container width is set to a 100%.
So maybe the problem is the timing of the width calculation?
I Really hope someone can help me in the right direction.
Related
Datalabels on the top bars in chart are getting cut off. Could you please provide me some suggestions
It looks like not the issue of chart.js but of the parent div mainly. You are crashing the divs of the container. Try resizing it
I am using amcharts and I have a grid layout on my page to store 3 elements: List, map and radar chart.
The radar chart doesn't display properly for some reason. It doesn't matter what dimensions and sizes I give to the parent div, it doesn't display the radar with all the labels. It always cuts off some of them.
I couldn't find anything about it in documentation or in here. Here are the results of my stylings: first, second third.
After unsuccessful attempts at altering CSS, I fixed it by adding a title of the chart at the top and label with opacity 0 at the bottom using charts prototypes in JS. I couldn't find any solution in documentation, but to set fixed maxHeight of the radar in pixels. The solution with pixels wouldn't work well with CSS-Grid.
fixed container
I am new to d3.js here, please help, where i want to apply scrolling to div, which has svg and underneath legends, legends will be added dynamically based on the multiline chart, for demonstration i put through single trend line but in real time there will be like 10 to 20 trend lines in the single chart. The issue is the with legends, are cutting off, i know this is because of svg has height limit, how to overcome this problem?, i have tried applying overflow-y:scroll to svg but doesn't work, tried putting legends in foreignObject element works fine but doesn't work in IE, the application that i am working on will run in IE mostly.
Any help is much appreciated.Plunker
It looks like your problem is with the height of the SVG itself. Try resizing the SVG to something larger like:
d3.select('svg').attr('height', 600);
Even try this in the console.
The SVG doesn't really have a max height (as far as I am aware). The problem is that your div is a larger height (400 px) than your SVG (~370px). If the SVG is larger than the div, according to your y-overflow: scroll, it will be scrollable, but will retain the appearance (because of the div) of being 400 px tall. However, if the div is larger than the SVG, there's nothing to scroll.
Does anyone know if it's possible with Chartist.js to ensure a horizontal bar chart takes full width of the chart container?
If you look at the screenshot you can see that the gray bar does not take up the whole width, based on the examples I would have thought that the highest value data point in the series would be scaled to fill to the end of the chart (and the axis scaled accordingly).
See screenshot.
A little late but I spent the afternoon trying to achieve the same thing with some success.
In short, I created a simple plugin that, on creation, dynamically adjusts the bar width based on the stepLength property.
https://jsfiddle.net/traviss0/gg1oj35x/
I'm having what appears to be a highcharts sizing issue. The width of the highcharts svg, and the containing div are the same, and they are sizing correctly (going from 525px to 530px when I bump the window). However the labels act correct after the resize, but not on page load.
Here's what the chart looks like on page load:
You can see the issue with the xAxis labels.
and after I size the window BIGGER (manually with my mouse):
note that I am using angularjs and the angularjs highcharts directive found here:
https://github.com/pablojim/highcharts-ng. I don't think that's related however.
any help you can provide is much appreciated!
Thanks
Probably the labels overlap and Highcharts removes them automatically. I suggest you to give a look at the Highcharts API.
Overflow
How to handle overflowing labels on horizontal axis. Can be undefined,
false or "justify". By default it aligns inside the chart area. If
"justify", labels will not render outside the plot area. If false, it
will not be aligned at all. If there is room to move it, it will be
aligned to the edge, else it will be removed.
Changing the overflow property to "justify" may fix it, but it may not look good. Give it a try.
Another suggestion to fix this, is to give it a fixed size of lines to display the labels, with the staggerLines property. Check this Fiddle and see it fits to your problem.