I'm trying to have limited number of labels in x-axis. but its not working.
below is my code. Please help me
xAxis: { max : 5,
style: {
fontFamily : "Open Sans",
fontweight: 700 ,
},
},`
The max property is used to set maximum value of the axis. To set limited number of labels and ticks use tickAmount option:
xAxis: {
tickAmount: 5,
style: {
fontFamily: "Open Sans",
fontweight: 700,
}
}
API Reference:
https://api.highcharts.com/highcharts/xAxis.max
https://api.highcharts.com/highcharts/xAxis.tickAmount
Related
is there a way to change color of the plotline label when the movement goes up and change it again in different font color when movement goes down?
yAxis.addPlotLine({
value: 66,
color: 'red',
width: 2,
id: 'plot-line-1',
label: {
text: 66,
align: 'right',
style: {
color: 'red',
fontWeight: 'bold'
},
y: newY,
x: 0
}
});
Here is a working file http://jsfiddle.net/kttfv1h3/9/
thanks for the help
You can add css style options to your plotLabel like to a simple object; docs
var prev_val = 0; // global
plotlabel = yAxis.plotLinesAndBands[0].label;
if(prev_val <= y) {
plotlabel.css({'color':'blue'});
} else {
plotlabel.css({'color':'green'});
}
prev_val = y;
My jsFiddle: http://jsfiddle.net/kttfv1h3/12/
After playing around a bit with the different settings I found a way to achieve what you are seeking.
By delcaring a new variable oldY
And doing the following in setInterval, the label color changes depending on if the value is increasing or decreasing:
if(y < oldY) {
yAxis.plotLinesAndBands["0"].label.element.style.fill = 'red';
} else {
yAxis.plotLinesAndBands["0"].label.element.style.fill = 'green';
}
oldY = y;
See jsfiddle for a working example based on the one you supplied.
using HighChart bar chart. aiming for big font labels on the bars
have increased font size in the datalabels.style.fontSize = 50
but labels only show in 2 of the right hand columns!
making font smaller (e.g. 30) it only shows in one bar... weird!
http://jsfiddle.net/py6txbr9/57/
dataLabels: {
enabled: true,
style: {
fontSize: 30,
color: 'white'
}
},
welcome any thoughts if this is happened to anyone else - can't find any bugs or issues else where.
thanks
Defaulty databales are printed "above" column, so when you set white color, there are "invisible". The solution is set "inside" flag as true and verticalAlign as top
dataLabels: {
enabled: true,
verticalAlign:'top',
inside:true,
style: {
fontSize: 30,
color: 'white'
}
},
Example: http://jsfiddle.net/py6txbr9/59/
Is there any way to update the font size/color of the dates in the navigator in Highstock?
Based on the documentation, it doesn't have the usual style property. I wanted to decrease the font size of the dates and experiment on the color a bit but HS doesn't seem to have that option.
navigator: {
xAxis: {
labels: {
style: {
color: '#6D869F',
fontWeight: 'bold'
}
}
},
},
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 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.