I would like to ask, how to shrink space between grouped columns in AmChart library?
I tried to find it in documentation but without luck.
Thanks for any help.
See image:
Space between columns is set by chart.columnSpacing property. But I am not sure if this is the case, could it be you have some graph with missing data?
You can control the column spacing by changing the width(for columns) or height(bars) of the chart div element.
Related
I am creating a column chart but I see too much space between the columns and I want to reduce the space between them. The labels on the xAxis are also not aligning.
This is my fiddle: https://jsfiddle.net/q3atxr4c/1/.
I added pointPadding, borderWidth and groupPadding. None of these are working.
Is there a way for me to reduce space between the columns?
Also all the values show up on my webpage (with navigation working) but are not on the fiddle so thats why I have a large div.
I want to be able to adjust the distance the columns and align the labels on the xAxis for them. Please help!
The pointPadding and groupPadding options won't work as long as the pointWidth is set, which takes precedence. As for the xAxis' labels, they are aligned correctly because they are in the center of all points of a specific category. You can't see them as they have 0 values. You can either remove 0's points or set grouping property to false.
API Reference:
https://api.highcharts.com/highcharts/series.column.pointWidth
https://api.highcharts.com/highcharts/series.column.grouping
Examples:
https://jsfiddle.net/BlackLabel/zsnju2xm/ - using pointPadding and groupPadding with all points visible
https://jsfiddle.net/BlackLabel/kzrunfv0/ - using grouping
I'm using amcharts to create my chart, legend is in separate container.
Applying option
chart.legend.align = 'right'
has no effect
Codepen
If you're looking to align the contents of the legend, i.e. the legend items to the right, and not the entire legend itself (I am presuming this, because the legend is in an external, custom <div>, and this is taken straight out of our guides on the subject. If you meant something else please do let us know.), then you'll have to change its layout, then align its contents to the right via contentAlign. E.g.
// Align legend items to the right
chart.legend.layout = "vertical";
chart.legend.contentAlign = "right";
Here's a demo:
https://codepen.io/team/amcharts/pen/0aa8b7741a25a86fafa48b747077b8e3
I highly recommend checking out our guide, "Working with Containers", it contains various details regarding laying things out in amCharts v4. Also, once you align everything to the right, the legend is still going to be locked into the height of its html wrapper, i.e. 150px in your case, with no way to access the rest of the content. The demo above is a fork of what's found in our "Making the external legend scrollable" guide.
legend.align has no effect, because the width of the legend is 100%.
This is used by parent Container when layouting its children.
You should align the content with legend.contentAlign:
chart.legend.contentAlign = 'right';
Here I forked your code pen to show the result.
Another error in you code pen is the value of legend.valign
Valid values are:
"top" | "middle" | "bottom" | "none"
See VerticalAlign.
So you should set it this way:
chart.legend.valign = 'middle';
I'm trying to create something similar to the below but using Highcharts bar chart.
I can't seem to find any implementation like this that utilises highcarts, but was wondering if anyone has come across this or a workaround to create a table joined to the chart?
My data would differ and therefore the number of rows output could be between 1 and 20.
Example of the basic bar provided by Highcharts
The most simple solution I can think of is positioning two divs inside the table like this:
<div style="width:100%;height:20px;><div style="width:48%;height:20px;background:blue;"></div></div>
and then you can alter the width style attribute of the second div.
I found an even better solution:
<progress min="10" value="22" max="100">
check it out: https://www.w3schools.com/tags/tag_progress.asp
So in the picture attached I would like to remove the data in the scrollbar itself. I've poked around in the chart as much as possible. Best I was able to find was to straight up remove all the labels which is not what I want to do.
The labels in the valueScrollbar are a result of setting autoGridCount to true. You either have to remove the autoGridCount setting or set it to false to remove the labels in the scrollbar.
I have to set the height & width of the Highcharts placeholder. But the data to be displayed is variable. When the series names(long name) come to much more. The lengend height grows too high and hide the chart.
How could I solve this problem? Hoping to get some help.
I faced the same issue as you have mentioned. I was setting chart height and marginBottom property for the chart. I removed the marginBotton property and its working fine. AS your legend grows, the chart canvas area gets adjusted by itself and the legend does not overlap with the plot area
After your chart loads.. put this in your code..
$('.highcharts-legend').attr('transform', 'translate(50,400)')
But It will still move if you resize the browser...
Ill let you know if I figure it out..
As you can see here the release 2.2.4 introduces legend paging.
You can custom it following the reference.
As you add your series to the chart just stop adding them to the legend after a certain point (eg after 5) with the following option:
showInLegend: false
docs: http://www.highcharts.com/ref/#plotOptions-series
demo: http://jsfiddle.net/7Mmee/14/
see this jfiddle link.this is fiddle and highchart links
http://jsfiddle.net/highcharts/B9L2b/
I think this will solve your problem.