I am using markers in my charts and using point chart only. Now when I am using radius to 10 then point starts from given xvalue - 5 and spans till xvalue + 5. I want point to start from xvalue and spans till xvalue + 10.
Actually left most points are going beyond chart's left extreme and that looks bad.
here is the fiddle:
http://jsfiddle.net/v3tP5/
marker : {
enabled : true,
radius : 10,
symbol: 'square'
}
I think instead of changing the location of each point, this solution will work better:
For your fiddle in the comment, add yAxis label config like this [Link Here]:
yAxis: {
offset: 20,
labels: {
align: 'right',
x: 0,
y: 3
}
},
And for the fiddle in your question, a config like this would look pretty nice [Link Here]:
yAxis: {
offset: 8,
labels: {
align: 'right',
x: -3,
y: 3
},
showLastLabel: true
},
Hopefully this will work for what you're trying to do. If there are other configs you would like to add or if you have other questions, I will try to help!
Related
Is there a way to have a point specific positionning of the xAxis labels ?
I am using a waterfall chart and for some bars I would like the label to appear directly under the bar like below :
I have found the following code in the xAxis plotOptions but at this point I don't see how I can acces the info on the bottom of the chart.
xAxis: {
labels: {
y:-100 //label's y position
}
},
You can use point dataLabels to achieve such result:
dataLabels: {
crop: false,
overflow: 'none',
verticalAlign: 'bottom',
format: 'label1',
y: 20
}
Live demo: https://jsfiddle.net/BlackLabel/71jtp5mf/
API Reference: https://api.highcharts.com/highcharts/series.waterfall.dataLabels
Another way is to create your own custom function to position the xAxis labels, for example:
events: {
load: function() {
var chart = this,
point;
Highcharts.objectEach(chart.xAxis[0].ticks, function(tick) {
if (!tick.isNewLabel) {
point = chart.series[0].points[tick.pos];
tick.label.attr({
y: point.plotY + chart.plotTop + point.shapeArgs.height + 15
})
}
});
}
}
Live demo: https://jsfiddle.net/BlackLabel/oaj9bgt4/
I am working on a 3d scatter plot chart. But facing issues with setting up the position of z axis label.
Kindly help me in getting it back in proper position. Thanks in advance.
I tried to play around with the zaxis values but no luck.
zAxis: {
min: 0,
max: 11,
gridLineColor: 'white',
categories: ['W', '1', '2', '3c', '3b', '3a', '4c', '4b', '4a', '5c', '5b', '5a'],
labels: {
y: 1,
rotation: 30,
align: 'center'
}
}
JS Fiddle link : http://jsfiddle.net/suprcool01/xvdcqbyk/24/
I use Highchart to draw my charts. I use :
xAxis: {
labels: {
rotation: -45,
align: 'top'
},
categories: xAxisLabel
},
for rotate the xaxis labels when number of labels are large.
But i want that labels automatically rotate when number of labels are large.
Is there any way to do this?
How can i do it?
thanks
Highchart autorotate by default. You can use:
xAxis: {
labels: {
autoRotation: [-10, -20, -30, -40, -50, -60, -70, -80, -90]
}
},
see example in this link:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/labels-autorotation-0-90/
or by default:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/labels-autorotation-default/
Is it possible to invert the y-axis, but not the data? I have a ranking which should start with 1 at the top, not at the bottom, but the columns should stay just normal.
Thanks for any hints!
You can use reversed yAxis, and column series, where each point will have y and low values, where low values are the same as the lowest number. See: http://jsfiddle.net/JVNjs/303/
var max = 10;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Chart Title'
},
credits: {
enabled: false
},
yAxis: {
min: 0,
max: max,
tickInterval: 2,
reversed: true
},
series: [{
type: 'column',
data: [{
y: 1,
low: max
}, {
y: 3,
low: max
}, {
y: 6,
low: max
}]
}]
There is no good easy direct way to do it (afaik).
There are a variety of approaches you could take, however.
This example uses a reversed axis and stacked columns:
http://jsfiddle.net/jlbriggs/JVNjs/301/
stacking:'normal',
It relies on adding a second series that is the difference between your value and the max, which means you must also specify a y axis max.
I left the second series a light grey so you can see them, but you can set their opacity to 0 so that they are invisible.
Other options might include doing some calculations on the y axis label formatter to display the axis labels as you want without having to touch the data.
Highcharts provides an option for this called reversed setting it true will do the work for you.
http://api.highcharts.com/highcharts#yAxis.reversed
reversed: true
here is the jsfiddle
http://jsfiddle.net/bmbhD/
If I try to rotate the data labels in my column charts, I can not align the labels at the bottom of my columns, verticalAlign appears to be completed ignored.
basically trying to use:
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
rotation: -90
}
}
}
fiddle with it at: http://jsfiddle.net/FbhAs/
Anyone know a work-around?
-= Jab
The dataLabels don't seem to align correctly to the bottom. Instead, use the axis labels themselves. For a column chart, you would put this in xAxis for the chart options.
xAxis: {
labels: {
enabled: true,
rotation: -90,
y: -10 // negative goes upwards
}
}
You can then add styling, a formatter function, etc. as per dataLabels.
You can update datalabels position, based on translate() function which allows to "move" svg object for defined postiison.
http://jsfiddle.net/wMLg6/37/
var bottom = chart.plotHeight - 20;
$.each(chart.series[0].data,function(i,data){
data.dataLabel.attr({
y: bottom
});
});