I'm trying to put Y-Axis title on top right of the Y-Axis, right below the chart title. However, when I insert the axis title, the whole graph moves to the right. I tried to used spacingLeft to set the position of the chart, but nothing changes. Is there a way to keep the position of the chart even if I add the axis title?
Here is my code:
$(function () {
$('#container').highcharts({
chart: {
marginBottom: 80,
spacingTop: 20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
title: {
text: 'Chart title',
y: -10
},
yAxis: {
title: {
text: 'aaaaaaaaaaaaaaaaaaa',
align: 'high',
rotation: 0,
x: 100,
y:-20
},
labels: {
align: 'high',
x: 0,
y: -5
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
jsfiddle: http://jsfiddle.net/8m7rc/1/
Min Sun Song, you can use offset property to reduce that gap.
offset: -120,
I've updated you fiddle here
Hope this is what you are looking for.
You can set marginLeft property for a chart. See demo.
Related
I have an issue with setting annotations above plot area. When I inspect chart in the console I see that annotation is rendered it's just label doesn't show up.
I browsed highcharts forum and found this topic: https://www.highcharts.com/forum/viewtopic.php?t=39918 where #ppotaczek created livedemo http://jsfiddle.net/ppotaczek/j4m2vzaa/ to answer someone's question, and i think I have a similar situation. Am I missing something?
Can someone suggest me a workaround? Thanks!
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
]
},
title: {
text: 'Highcharts Annotations'
},
series: [{
data: [{
y: 29.9,
id: 'min'
}, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, {
y: 216.4,
id: 'max'
}, 194.1, 95.6, 54.4]
}],
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top'
},
labels: [{
y: 55,
point: {
xAxis: 0,
yAxis: 0,
x: 1,
y: 0
},
text: 'label1'
}, {
y: 55,
point: {
xAxis: 0,
yAxis: 0,
x: 3,
y: 0
},
text: 'label2',
backgroundColor: 'white'
}]
}]
});
]1
Thank you for sharing this issue, it is a regression. I just reported this bug on Highcharts GitHub issue channel.
https://github.com/highcharts/highcharts/issues/12897
If you need temporary workaround please ask about it in the comment under the above link. The core developers should respond to you quickly.
I'm checking through the documentation and don't really see a way to do this.
What I'd like to do is position the chart title to the right of the chart, rotated 90 degrees and centered vertically.
So something like this (used Photoshop to represent rotation):
I know I can set the x, and y position like this:
title: {
text: 'Chart title',
align: 'right',
y: 140,
x: 50,
rotation: 90 //this does not work
}
But that doesn't really give me what I want. Is there a setting that I'm not finding to position the title on the right, and rotate it 90 degrees?
Here is a fiddle I was messing with for the x, y axis positioning:
http://jsfiddle.net/c2tb1p5b/1/
You can do this using a combination of x, y placement on the title along with CSS - you will need to mess around with the exact values but something like this should work:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Chart title',
align: 'right',
y:-480,
x:-280
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
step: 1
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
CSS:
.highcharts-title {
transform: rotate(90deg);
}
http://jsfiddle.net/c2tb1p5b/2/
I'm using highcharts to display stackbars graph.
I'd the y axis label to appear on top of the y axis, that's why I'm setting its offset to -10. however, when the graph's title is not displayed I cannot see the axis label.
Here's an example with graph title and axis title
Here's an example without graph title and from some reason axis title disappears
Here's how I set my yAxis label:
yAxis: {
lineWidth: 2,
tickWidth: 1,
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -20
}
},
updated Link
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: [70, 0]
},
title: {
text: ''
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
lineWidth: 1,
tickWidth: 1,
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -10
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
margin: [70, 0]
I try to use a horizontal crosshair as some kind of auxiliary line to compare the upper and lower endpoints of the errorbars.
From a statistical point of view it is some kind of virtual significance test by comparing the confidence intervals.
My problem is that given a column chart I am not able to reach the lower endpoint of the errorbars with the crosshair.
Here is a fiddle (simplified demo from Highcharts).
var chart;
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Temperature vs Rainfall'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}],
tooltip:{
crosshairs: [false, {color: 'red'}],
formatter: function(){
return false;
}
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 0,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
}, {
name: 'Rainfall error',
type: 'errorbar',
yAxis: 0,
data: [[42, 51], [66, 73], [90, 110], [128, 136], [140, 150], [171, 179], [135, 143], [142, 149], [204, 220], [189, 199], [90, 110], [52, 56]],
}]
});
});
Any suggestions are welcome!
Error bars are paths in SVG, so there's no such thing like lower/higher part of it. If you check highcharts.src.js file and search for drawCrosshair, you will find method responsible for rendering crosshair. As you can see, there is line:
pos = (this.chart.inverted != this.horiz) ? point.plotX : this.len - point.plotY;
Which takes point.plotY to get position of the crosshair. In error bars plotY is top of the point. If you replace point.plotY with point.lowPlot (only for error bars!) then you will render crosshair on the bottom part of the error bar.
http://jsfiddle.net/nUCBj/1/
How can I prevent the datalabels from overlapping? I have tried using the formatter option and positioning the dataLabel using CSS position/top/bottom, etc... The datalabels are required. I can't just use the tooltip in it's place :-)
Thank you,
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
backgroundColor: 'rgba(255, 255, 255, 0.7)',
borderWidth: 1,
shadow: true,
borderRadius: 1,
useHTML: true,
padding: 1
}
}
},
series: [{
name: 'test',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] },{
name: 'test2',
data: [31, 80, 106.4, 22, 150, 17, 135.7, 14, 230, 181, 9, 54]
}]
});
});
The data attribute in the series can be passed in as an array of objects instead of as an array of numbers. Each object can define it's own dataLabels options (http://api.highcharts.com/highcharts#series.data). For the first series you can align the points to the left, and the second to the right so they do not overlap.