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/
Related
I'm new with highcharts and what I'm trying to achieve is to have fixed bar height/width and fixed spacing between bars in highcharts. Either there are 20 bars or only 3 of them, the bar height/width and space between bars should remain the same. And the highchart itself should be with fixed height, f.e. 300px. I'm not sure this is doable, but here is an example of what I'm trying to achieve:
https://imgur.com/BmyZjvb
https://imgur.com/OMiZZ2R
Yes, you need to only set fixed axis extremes:
xAxis: {
min: 0,
max: 4
},
yAxis: {
min: 0,
max: 100
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5011/
API Reference:
https://api.highcharts.com/highcharts/xAxis.min
https://api.highcharts.com/highcharts/xAxis.max
I don't know if there is a better solution, but this is one solution:
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', '', '', '']
},
series: [
{
data: [5, 3, 4, 0, 0, 0]
}
],
http://jsfiddle.net/aabramya/jfdv3z65/7/
Hello Highcharts and stackoverflow,
I would like to make it easy for end users to compare wedgets in a Variable radius pie chart (basically the same as Line to the Y axis on hover but radial). As such, when they hover on a wedge, I would like to draw a "ring" around the circle for easy comparisons. This would be appear/disappear/change based on which point you are hovering on.
(in some ways - like a mix between the visualization of the Variable radius pie chart with the concept of an axis like a Polar/Radar Chart)
Any ideas?
Use column series in polar chart with crosshair:
chart: {
polar: true
},
series: [{
type: 'column',
pointPadding: 0,
groupPadding: 0,
colorByPoint: true,
data: [...]
}],
yAxis: {
crosshair: {
color: 'red',
zIndex: 3
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5005/
API Reference:
https://api.highcharts.com/highcharts/chart.polar
https://api.highcharts.com/highcharts/yAxis.crosshair
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/
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!
I have a graph which looks like:
http://www.google.com/imgres?hl=en&sa=X&biw=1148&bih=538&tbm=isch&prmd=imvns&tbnid=ImVcaOUrw9RZ8M:&imgrefurl=http://peltiertech.com/WordPress/stack-columns-in-order-of-size-with-vba/&docid=Wy54Uzfs1JDBAM&imgurl=http://peltiertech.com/images/2009-05/StackChart4.png&w=502&h=331&ei=4fxlUOLCFMzSigLesIGYDQ&zoom=1&iact=hc&vpx=271&vpy=229&dur=1078&hovh=182&hovw=278&tx=195&ty=91&sig=113812968337335397921&page=1&tbnh=132&tbnw=199&start=0&ndsp=10&ved=1t:429,r:1,s:0,i:77
But I want a graph which looks like: http://www.google.com/imgres?hl=en&sa=X&biw=1148&bih=538&tbm=isch&prmd=imvns&tbnid=NFn2T8iaojOpvM:&imgrefurl=http://peltiertech.com/Utility/ClusterStackUtility.html&docid=_9NYGInExJfrmM&imgurl=http://peltiertech.com/Utility/pix/clusterstackcolumns.png&w=282&h=207&ei=4fxlUOLCFMzSigLesIGYDQ&zoom=1&iact=hc&vpx=509&vpy=237&dur=85&hovh=166&hovw=226&tx=52&ty=80&sig=113812968337335397921&page=1&tbnh=150&tbnw=203&start=0&ndsp=10&ved=1t:429,r:2,s:0,i:80
* ABOVE ARE JUST AN EXAMPLE OF THE GRAPH TO SHOW WHAT I WANT. NO INTENTION COPYING ANYTHING. THESE ARE RANDOM IMAGES FROM GOOGLE SEARCH.
Thanks
There are various options available in the highchart yAxis object, allowing you to customize it in almost any & every way.
yAxis: {
gridLineWidth: 0,
// tickColor: 'black',
tickLength: 5,
tickWidth: 1,
tickPosition: 'outside',
labels: {
align: 'right',
x:-10,
y:5
},
lineWidth:1,
// lineColor:'black'
}
I highly encourage you to have a look at the awesomely useful highcharts api
"Hiding grid line but retaining ticks | Highchart & Highstock" # jsFiddle