Trying to do a simple left alignment for the labels on the x-axis of a stacked bar chart using HighCharts API. No matter what label options I try nothing works.
I tried setting verticalAlignment: "bottom" and useHTML: "true" but depending upon the settings there's always something wrong. Is this a bug in HighCharts?
Here are some examples:
http://jsfiddle.net/ojbbry6c/ Properly left-aligned labels, but for some reason the chart overlaps the labels when set to left alignment?
labels: {
verticalAlign: 'bottom',
align: 'left',
textAlign: 'left',
useHTML: true,
}
http://jsfiddle.net/2rx0zws1/1/ turn off left align and now the chart doesn't overlap, but the alignment is broken.
labels: {
verticalAlign: 'bottom',
//align: 'left',
textAlign: 'left',
useHTML: true,
}
How do you make the labels on the x-axis left-align? For other chart types where the y-axis is on the left it works fine, but stackedbar alignment seems broken.
The comment by #Grzegorz Blachlínski is correct, this was an issue here:
https://github.com/highcharts/highcharts/issues/5286
But it's been resolved in highcharts v6+, and the solution is to use align in conjunction with "reserveSpace". This works:
align: "left",
reserveSpace: true,
Related
I want the legend bottom centre whenever I give the width: '100%' the legend is coming left side I want to keep in middle.
example code:
legend:{
backgroundColor: 'rgba(255,255,255)',
Width : '100%',
},
You can use flex or grid properties, it's make easier if you want the element to center.
legend:{ backgroundColor: 'rgba(255,255,255)',display: "grid", placeItems: "center" }
And place add some more info if you not want that answer. That help other to understand what problem really is
I am working with Highcharts Bar Graph (vertical) and I would like to have the Members data to appear on top of each bar (hovers we will keep as well which is working). I've tried various ways with plotOptions and could not get this to work to show Members data on top of the bar graph view. The first link is my working code.
**https://codepen.io/jenfloods/pen/jOyXEQd**
The second link above is the example is how I would like the data text to appear on top of a bar graph with white shadow letters but this would apply to my vertical bars and not horizontal as this example shows.
**https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/bar-datalabels-align-inside-bar/**
Anyone has an example or can work with my code to make it happen?
You need to enable data labels for series and use the configuration like below:
plotOptions: {
series: {
...,
dataLabels: {
rotation: 90,
verticalAlign: 'top',
y: 10,
align: 'left',
inside: true,
enabled: true,
color: '#FFFFFF'
},
}
}
Live demo: http://jsfiddle.net/BlackLabel/y04j6z3m/
API Reference: https://api.highcharts.com/highcharts/plotOptions.column.dataLabels
I'm trying to show the values of my series data in the highchart legend using this and I've tried pretty much all the examples I can find online, specifically adding:
legend: {
enabled: true,
floating: true,
align: 'left',
verticalAlign: 'top',
y: 35,
labelFormat: '<span style="color:{color}">{name}</span>: <b>{point.y:.2f} USD</b> ({point.change:.2f}%)<br/>',
borderWidth: 0
},
But nothing is working in order to show the values of the data in my highchart and to display the highchart vertically to the right. Can someone please tell me what I'm doing wrong please?
http://jsfiddle.net/tobitobetoby/6druu3a2/3/
Legend options do not apply because you placed them in series object. I corrected the demo and add couple of additional options, like layout.
API Reference:
http://api.highcharts.com/highcharts/legend.layout
Example:
http://jsfiddle.net/1fqvzpdn/
I'm using Highcharts API for one of my project.
I need legends on the right side and chart on the left as in below link. Can anyone have any idea how to do this in Highcharts?
Many thanks in advance.
Please check this image.
Set legend's layout, align and verticalAlign options as follows:
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
itemMarginTop: 10,
itemMarginBottom: 10
},
By itemMarginTop/Bottom you can control the padding between the legend items.
example: http://jsfiddle.net/ca8h5eqz/
I'm new with Google Charts and I am not able to obtain a fine result with the texts surrounding the graph.
This is how my chart looks:
As you can see, it does cut both Horizontal-Axis and Legends, so the final result is not as good as It could be. Is there a way to solve this? I've been reading the official documentation and some posts from here, but I haven't found the way to do this.
Recap: How do we modify the legend or the axis texts so they are fully visible?
After some time experimenting, I daresay it is not posible to choose how much part of the words on legend or axis you can show.
However, you can play with their sizes and position so you get -more or less- what we were looking for.
This is what can be done:
legend: {position: 'top', textStyle: {fontSize: 14}}
I've also made the image a little bit bigger so it fits the x-axis without problems (There was also the option of making its text smaller).
So doing this, this is what you get:
Its basically about setting your chart area vs width / height.
width: [yourChoice]px,
chartArea: {width: '50%'}
ref https://stackoverflow.com/a/6870732/661584
Also as #ArcDare says using the other available styling options such as font size etc
For optmized chart area,
chartArea: {'width': '90%', 'height': '60%'},
legend: { position: 'bottom' },
hAxis : { textStyle : { fontSize: 10} },
vAxis : { textStyle : { fontSize: 10} },
The trick is setting axis textStyle fontsize will enable better placement of legend on the bottom of the chart as the chart Area is about 60-70%
Feel free to use my custom Google Charts plugin which creates both chart and table.
https://github.com/cosmoarunn/gapiExt