In Highcharts, I'd like to put the y-axis title at the top and have it left-aligned with the y-axis labels.
I've tried this:
$('#container').highcharts({
...
yAxis: {
...
title: {
align: 'high',
text: 'Y-axis title',
rotation: 0,
y: -10,
//To left-align title with labels
textAlign: 'left', //This is undocumented, but appears to work
margin: 0
}
}
})
However, I get an excessive left margin which seems to be proportional to the length of the y-axis title.
JsFiddle
It looks like the margin calculation doesn't take into account the textAlign: 'left' setting.
UPDATE: I should say that my current "solution" is to set a margin with chart.marginLeft but that's not ideal because it's fixed. The left margin should be just big enough to accommodate the axis labels (however big they might be).
How can I left-align the y-axis title with the labels and have a reasonable left margin?
I decided to use marginLeft (yes, you read that correctly), but based on the length of your axis label, to provide the needed flexibility.
What I did here is set your chart options to a variable called chartOptions. I then calculated the length (number of characters) of the axis title, set the marginLeft property based on that value, and then drew the chart with the amended chart options.
chartOptions.chart.marginLeft = chartOptions.yAxis.title.text.length;
var chart = $('#container').highcharts(chartOptions);
Here's the working fiddle: http://jsfiddle.net/brightmatrix/6eeuay58/9/
I tested it with different numbers by increasing some of your data points.
Please let me know if this is useful and helpful for you.
Related
I am working on legacy code from a previous developer and they used highcharts.js (v3.0.1). The xAxis is landing within the graph (screenshot) and I can't sort out why this is. I tried to recreate this in jsfiddle but I can't get that axis to move. I thought that maybe it was a bug in the version but I can't get it to replicate so I'm thinking that is has to be something within the sites own CSS that is manipulating it, however, it's built with g, rect, and text tags which I don't see in any of the custom CSS files.
I've looked through other Highchart.js posts on here but I haven't seen this issue posted yet. Does anyone know what I'm missing?
EDIT: I forgot to mention this but all the usernames are centered text-center
Check exactly how xAxis labels are aligned. As I can see they are rotated vertically so it is important to set appropriate labels align property:
xAxis: {
categories: ['Apple', 'Samsung', 'Dell', 'Lenovo'],
labels: {
align: 'left',
rotation: 90
}
}
Demo:
- labels align center: https://jsfiddle.net/wchmiel/29b4qejc/
- labels align left: https://jsfiddle.net/wchmiel/56evyrxj/
Api reference:
https://api.highcharts.com/highcharts/xAxis.labels.align
are you use the labels padding ?
https://api.highcharts.com/highcharts/xAxis.labels.padding
Be sure that the number is greater than 0.
In my highstock charts i required label on the left side of the graphs. When i used opposite: false + align: left for labels they are positioned above graph. But i want to start graph rendering after labels ends.
Left side labels without required graph render
I saw solution for my problem in Highcharts not in highstock some time before. But now i cant find it to show what exactly i need
Expected result
Thanks in advance
OK, so you want the labels inside the plot area.
You can do this by adding
labels: {
align: 'left',
x: 0
}
to your yAxis properties.
This moves the starting point of the labels to the axis line, and extends the labels to the right from that point. If you want them pushed further inside, just increase x.
The problem that you'll run into is that the plot will not respect the label placement - your line will still start at the same point, as if the labels weren't there.
Normally, you could just use the minPadding setting on the xAxis to increase the space for the labels, but this doesn't work in the case of the navigator, as explained here:
http://api.highcharts.com/highstock/xAxis.minPadding
When the axis' min option is set or a min extreme is set using axis.setExtremes(), the minPadding will be ignored
I am sure there is some work around for this problem, but I do not have the solution currently.
Updated fiddle:
http://jsfiddle.net/d6mre68v/
I am using Chart.js as my charting library. I have created horizontalBar chart.
I need to set the width of individual bar in the chart.
I did not found anything specific in chartjs documentation but while looking at source code I found the option barThickness which is setting the fixed bar width
But as number of rows increase, instead of increasing the height of the chart, the bar are colliding with each other. Please check fiddle for example:
https://jsfiddle.net/orhp0zLg/
Is there any way we can increase the height of the chart instead of letting the bars collide with each other?
The barThickness property is a fixed width, as you noticed in your issue.
However, you have an other property called barPercentage which is a multiplier of the max width of your bars.
You should set berPercentage to a value (let's say 0.95) and you'll always have the same format, no matter how many bars you have :
options: {
scales: {
yAxes: [{
barPercentage: 0.95,
}]
}
}
Here is your updated fiddle with the fix and here are the results with first 7 values and then 12 :
I have a polar highchart with 12 categories. Since x-axis labels contain up to 4 lines, automatic label y-positioning is slightly off for the categories on the top and the bottom. It looks similar to this example, but in my case, the labels overlap with the chart area, not with each other. So I need to subtract a few pixels from the y-coordinate of the labels on the top and add a few pixels for the category labels at the bottom.
I tried setting the offset parameter of the x-axis, but this shifts up or down all labels by the same amount:
xAxis: {
offset: 20
}
I also tried adding a callback function to the formatter of the x-axis labels, but I just can't figure out how to adjust every category label position.
this is a solution of highchart Heldesk
http://jsfiddle.net/crguqmsv/1/
function(chart){
var len = chart.xAxis[0].ticks.length;
$.each(chart.xAxis[0].ticks,function(i,tick){
if(i>=0 && i<=90) {
console.log(tick.label.attr({
rotation:-45
}));
}
});
}
You can adjust the position of the labels with the "x" and "y" options within the "labels" category under the axis definition.
labels: {
x: 20,
y: 10
}
In the above case, the labels will be 20px right and 10px down from their default position.
EDIT: I re-read the title, and Im sorry, this is for all the labels, not individually. My Bad.
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