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
Related
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/
http://jsfiddle.net/sgrg93/brev29jg/
legend:{
borderWidth: 1,
width: 300 //to increase the width of legend more than that of ColorAxis
},
In the above fiddle, width of the legend is more than that of the ColorAxis. The ColorAxis is left aligned within the legend. Is there any way to align the ColorAxis to the center or the right within the legend box?
I don't want to use
this.legend.contentGroup.translate(50,0)
on load() event of chart
Sure, you can alter the object 'legend' to disable it with:
legend:{
enabled: false
}
Is there a reason you need the whitespace at all?
If you remove the width property, you could simply make the surrounding box the correct size for your legend, as so:
legend:{
borderWidth:1
//width:300
},
http://jsfiddle.net/brev29jg/1/
I have a heatmap that has some space at the bottom that I want to get rid of. I have tried multiple SO threads suggesting that I change chart.marginBottom, chart.spacingBottom, x and yAxis margins, disabled legend, etc. Unfortunately, I created a jsfiddle and am unable to replicate the issue. The jsfiddle code is nearly identical my code: http://jsfiddle.net/b637gdxv/1/
chart: {
type: 'heatmap',
marginTop: 26,
marginLeft: 5,
marginRight: 5,
marginBottom: 5,
width: 200, // - width when in one row
height: 250,
borderWidth: 3,
borderColor: 'grey',
borderRadius: 5,
plotBackgroundColor: '#FFFFFF',
plotShadow: true
},
Here is an image of what it looks like on my page:
Notice the extra space on the bottom. Sorry that I am not able to define the problem more specifically - the difference between my page and the jsfiddle eludes me, and I am not super experienced with javascript. Any ideas of things to try?
Did a little more digging into the highcharts JS source code, and found a work around! This is actually being impacted by the logic that calculates the axis ticks, so setting the "endOnTick" option to 'false' on the impacted axis appears to resolve the issue. E.g.
yAxis: {
labels: {
enabled: false
},
endOnTick: false, // This is the fix
title: null,
reversed: true
}
Here is an updated jsfiddle showing the fix:
http://jsfiddle.net/e0av9wm1/
Compare to the following, which doesn't include the fix:
http://jsfiddle.net/v1697qhj/
Since we don't have enough code to really identify what you're issue is and you can't even reproduce it on jsfiddle, I'll give you a walkthrough of the steps I take to identify CSS issues and fix them - particularly when the CSS is applied dynamically.
If you're using IE, use the developer tools (F12). From the HTML tab click the "Select Element" tool (it looks like a pointer). Move the mouse to the outer box and it will garnish a slight grey border... click the mouse.
At this point - I think you'll have in the HTML pane the following tag highlighted:
<rect class=" highcharts-background" fill="#ffffff" stroke="grey" stroke-width="3" x="1.5" y="1.5" width="196" height="246" rx="5" ry="5" strokeWidth="3"/>
Note the attributes are clickable and can be changed on the fly.
At this point you can start tinkering with the styles (on the right pane) or even switch to the CSS pane (next to the HTML tab) and tinker around with the various CSS definitions.
There are different developer tools for each browser. Chrome has them built in as well and Firefox has the FireBug plugin to provide them. For this type of thing they come close to working the same way.
Let us know what you find and good luck!
I'm running into a similar question with my heatmaps, and updated the jsfiddle to show the issue:
http://jsfiddle.net/v1697qhj/
You'll notice in that example that the cells of the heatmap do not fill the full height set on "chart.height". I'm wondering if the issue is because the number of rows divided into the available height is not an even number of pixels, so when highcharts draws the rows at a fixed pixel height there is some amount of total space left over that is never used.
Does anyone know if there's a way to get Highcharts to add a pixel to every so many rows (or columns for the horizontal case) so that the cells of the heatmap will always fill the available plot area?
chart: {
type: 'heatmap',
marginTop: 26,
marginLeft: 5,
marginRight: 5,
marginBottom: 5,
width: 200,
height: 250, // We want the cells to fill this entire height
borderWidth: 3,
borderColor: 'grey',
borderRadius: 5,
plotBackgroundColor: '#FFFFFF',
plotShadow: true
}
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