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/
Related
I want to increase the chart grid lines to fill the width of the graph.
I have got it till this point: https://jsfiddle.net/mukeshshamra1201/8pu9a5c4/97/
I have used y-axis property to achieve something, but I am not able to figure out the rest.
yAxis: {
min: 0,
title : "",
gridLineDashStyle: 'ShortDash',
labels: {
align :"left",
x:-6,
y:-3
}
}
I want something kike this :
Set spacingLeft and spacingRight to 0:
chart: {
...
spacingLeft: 0,
spacingRight: 0
}
Live demo: https://jsfiddle.net/BlackLabel/3Lpsz0hd/
API Reference: https://api.highcharts.com/highstock/chart.spacing
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 have a couple of formatting questions, as you'll see I'm running a very small chart 225*150...
How do I remove the x-axis labels? I still want the information in the tooltip, just not along the axis. I've tried...
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
...but it still shows "0, .5, 1, 1.5 etc..."
I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?
Last one, how do I set zero for the y-axis scale?
Here's a fiddle!
Thanks!
UPDATE: Added suggestions to original fiddle.
In this block:
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
You have
1) the categories property listed inside the title attribute, and
2) you have enabled: false set for the title attribute
categories is a property of the axis directly, and the enabled: false should be applied to the labels, not the title.
"I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?"
Primarily the marker radius property:
http://api.highcharts.com/highcharts#plotOptions.series.marker.radius
You can also look at the lineWidth property of the marker.
"Last one, how do I set zero for the y-axis scale?"
axis min property:
http://api.highcharts.com/highcharts#yAxis.min
updated fiddle: http://jsfiddle.net/jlbriggs/z6ZLt/8/
To disable the xAxis.labels you set enabled to false:
xAxis: {
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled: false,
labels: {
enabled: false
}
}
For doing "set zero for the y-axis scale" you set the yAxis.min value to 0:
yAxis: {
min: 0,
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}
To handle the size of the line + markers you need to modify their properties in :
plotOptions: {
series: {
marker: {
radius: 1.5
},
pointWidth: 1
}
}
I want to dynamically align the dataLabel in center of two bars.
The data which is visible dynamically appears either for green or the blue bar by using :
dataLabels: {
enabled: true,
formatter: function() {
return this.point.avg;
}
}
I dont want to use x and y attributes, as data can appear for any of the bar. Hope below mentioned image gives you a clear picture.
Note: The value of avg_fare does not represent the bar's value.
Can anyone help me to achieve this usecase?
Thanks
You can use the dataLabels.y parameter to offset the label into the position you desire.
series: [{
data: series1,
dataLabels: {
enabled: true,
y: -14 // move this down
}
}, {
data: series2,
dataLabels: {
enabled: true,
y: 14 // move this one up
}
}]
Here's a fiddle.
enable datalables only for one. and disable for all the remaining ones.
position that single label as you want by seetting x and y Values
dataLabels: {
align:'left',
enabled: true,
x: 20,
y: -10
},
you can refer this as example : http://jsfiddle.net/fMdk3/
Hope this will help you
I am trying to show more labels on yAxis, but I couldn't get it to work. My yAxis properties are as follows:
yAxis : {
title : {
text : '%CPU Utilization'
},
labels: {
enabled: true,
step: 5,
zIndex: 10
},
showLastLabel: true,
min:0,
max: 100,
plotLines : [{
value : 70,
color : '#FF3300',
dashStyle : 'shortdash',
width : 2,
label : {
text : 'Threshold',
align: 'right',
style: {
fontWeight: 'bold'
}
}
}]
},
I followed the documentation but does not seem to be working. I need a label at 0, 10, 20, 30, 40 (in 10 increments). Any idea whether this is doable in highcharts?
what you want to look at is the tickInterval property:
http://api.highcharts.com/highcharts#yAxis.tickInterval
If you need irregular intervals, you can instead use the tickPositions property:
http://api.highcharts.com/highcharts#yAxis.tickPositions
Or, if you need something even more complex, the tickPositioner function:
http://api.highcharts.com/highcharts#yAxis.tickPositioner
{{Edit:
remove the step property from your labels though - the step property tells the chart how many labels to skip when it draws them, not where to draw them.