I enabled shadow: true
Now, I want to customize the shadow by adding custom values for color, offsetX, offsetY, opacity, width
is there an example somewhere? I am a bit lost, THX!
https://api.highcharts.com/class-reference/Highcharts.ShadowOptionsObject#toc0
Here you can find information how to use the shadow available options: https://api.highcharts.com/highcharts/series.line.shadow
Demo: https://jsfiddle.net/BlackLabel/Lu89x4ra/
plotOptions: {
series: {
shadow: {
color: 'red',
offsetX: 10,
offsetY: 10
}
}
},
Related
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/
When I set this:
series: {
fillOpacity: 0.5,
fillColor:'#fff000'
}
highcharts will ignore opacity, if I take away fillcolor, the opacity works. However, I was asked to set fillcolour to be different.
http://jsfiddle.net/ywL646r8/1/. Can someone help?
Many Thanks
You can set the fill color with a rgba value
plotOptions: {
area: {
color: '#ff0000',
},
series: {
fillColor:'rgba(255,240,0,.5)'
}
http://jsfiddle.net/ywL646r8/2/
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.
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
});
});