Here is a simple example: http://jsfiddle.net/vecmftmh/
This is the data label portion of the example:
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
dataLabels: {
enabled: true,
allowOverlap: true
}
}
}
This plot shows a data label on top of each column. How could I also show a data label inside each column?
There isn't any option on Highcharts to handle two datalabels. But you can use this workaround with dataLabels.formatter and useHTML:true:
useHTML:true,
formatter: function() {
return '<div class="datalabel" style="position: relative; top: 20px"><b>'+ this.y +
'</div><br/><div class="datalabelInside" style="position: absolute; top: 45px"><b>'+ this.y +'</div>';
}
This way you can manually add two dataLabels with custom position and style. In your case, one inside columns and one outside. Here's the DEMO.
See this: Since v6.2.0, multiple data labels can be applied to each single point by defining them as an array of configs.
example: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-datalabels-multiple
Related
I need the dataLabels to be always displayed at the right end of bar chart irrespective of the data value. According to the Highcharts API, the dataLabel position is adjustable only relative of its current position. Is there a way to change the datalabel position relative to the chart area?
You're looking for something like this?
If you make the labels HTML elements instead of SVG elements..
plotOptions: {
bar: {
dataLabels: {
enabled: true,
allowOverlap: true,
//Labels are easier to move around if we switch from SVG to HTML:
useHTML: true,
}
}
}
..it's quite easy to move them around using CSS:
.highcharts-data-labels.highcharts-bar-series {
/* Stretch the labels container across the whole chart area: */
right: 0;
}
.highcharts-label.highcharts-data-label,
.highcharts-label.highcharts-data-label span {
/* Disable the default label placement.. */
left: auto !important;
/* ..and put them along the right side of the container */
right: 8px;
}
https://jsfiddle.net/ncbedru8/
You can also position data labels in the render event:
events: {
render: function() {
var chart = this;
chart.series.forEach(function(s) {
s.points.forEach(function(p) {
if (p.dataLabel) {
p.dataLabel.attr({
x: chart.plotWidth - p.dataLabel.width
});
}
});
});
}
}
Live demo: http://jsfiddle.net/BlackLabel/yt1joqLr/1/
API Reference: https://api.highcharts.com/highcharts/chart.events
I'd like to remove the value box from a Highcharts angular gauge.
I'm not sure it is possible...I have tried messing around with the JSFiddle demo trying to remove it and haven't been able to.
I was able to remove the minor and major ticks by adding
minorTickInterval: 'none',
tickPixelInterval: 'none'
But I can't figure out how to remove the value from the middle of the gauge.
or you can achieve the result you want just by adding the following lines:
series: [{
dataLabels: {
enabled: false
}
}]
You should add dataLabels.formatter to the series part of your gauge to remove it.
dataLabels: {
formatter: function () {
return null;
}
},
Live example: jsFiddle
http://jsfiddle.net/7rLnwdxu/1/
here is the code.
I want to make all the labels behave just like the Word1_Word2 one (stay in one line). Even when there is (space) or - between them.
Is it possible?
Thanks!
You can use the labels' style object to pass css to control this
labels: {
style: {
whiteSpace: 'nowrap'
}
}
Updated fiddle:
http://jsfiddle.net/jlbriggs/7rLnwdxu/2/
EDIT
In order to 1) accommodate more complex requirements of the labels that might arise, and 2) be more inline with the upcoming Highcharts 5 release, which will separate style and content, you can do this by
1) setting useHTML: true in the axis label properties
2) assigning a common label class to the html element that will contain your labels, and
3) use external CSS to specify all of the required styling.
Example, Chart code:
labels: {
useHTML: true,
formatter: function() {
return '<div class="category-label">'+this.value+'</div>'
}
}
CSS:
.category-label {
white-space: nowrap;
cursor: pointer;
font-weight: bold;
}
Updated fiddle:
http://jsfiddle.net/jlbriggs/7rLnwdxu/6/
I'm eager to find out if its possible to place last value in series to yAxis in highcharts.
It supposed to be simple label with last point value shown on the right side of the charts, dinamically chanhing when we add points to the chart.
thanks!
There are probably several methods.
One that I would use can be seen in this example:
http://jsfiddle.net/jlbriggs/zXLZA/
data: [7,12,16,32,{y:64,dataLabels:{enabled:true}}]
This makes use of the datalabels, which are enabled only for the last data point.
The downside to this is that you need to specify that in your data. Not hard to do, but may not fit your needs.
Another way would be to use a second y axis, and the tickPositions property:
http://jsfiddle.net/jlbriggs/zXLZA/4/
Another possible solution is to use tickPositioner with second yAxis. In such case with dynamic data, everything will be computed itself, see: http://jsfiddle.net/3c4tU/
tickPositioner: function(min,max){
var data = this.chart.yAxis[0].series[0].processedYData;
//last point
return [data[data.length-1]];
}
to get the highest value in any axis and series, use the function getExtreme(). It will find you the extreme value (highest or lowest depending of the argument you put behind). Select the chart, the axis and the series before.
here's an example: (whith your chart associated to the variable 'yourChart')
var highestValue = yourChart.yAxis[0].getExtremes().dataMax;
It will return the highest value of the first Y-axis' associated series.
While this below will return the lowest of the second X-axis' associated series:
var lowestValue = yourChart.xAxis[1].getExtremes().dataMin;
My recommended solution:
plotOptions: {
areaspline: {
fillOpacity: 0.2,
dataLabels: {
enabled: true,
borderRadius: 5,
backgroundColor: 'rgba(252, 255, 197, 0.7)',
borderWidth: 1,
borderColor: '#AAA',
y: -6,
formatter: function() {
if (this.x == this.series.data[this.series.data.length-1].x) {
return this.series.name + ': '+this.y;
} else {
return null;
}
}
}
}
}
we can make use of formatter for this
here is an example to display the last value
http://jsfiddle.net/kgNy4/1/
here is an example to display maximum value
http://jsfiddle.net/kgNy4/
In the example I have put
dataLabels: {
enabled: true
}
so that formatter function will be executed
I hope this will be useful for you
How to add a data values inside the slice in pie chart. Can any one help me in this? whether this is possible?
You can use datalalabels - distance parameter : http://api.highcharts.com/highcharts#plotOptions.pie.dataLabels.distance
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/pie-datalabels-distance/
plotOptions: {
pie: {
dataLabels: {
distance: -30,
color: 'white'
}
}
},