score:15
Looks like it's not possible to do that from within the formatter
.
But you could set them after the chart is rendered (loaded). Try something like this
$.each(chartObj.series[0].data, function(i, point) {
if(point.y > 100) {
point.dataLabel.attr({x:20});
}
});
in the load callback
(or if you need it in the redraw callback
).
See example here.
score:0
I've been trying to figure some of this out myself... it looks like instead of
this.series.chart.options.plotOptions.bar.dataLabels.x -= 20;
could you use...
this.series.options.dataLabels.x = -20;
... at this point I'm trying to understand if I'm able to discern the location of a dataLabel so that I can reposition it if necessary.
score:4
Although Bhesh's answer solves the problem for x/y positioning, Highcharts ignores any changes to the style property of dataLabels (see the problem here). However, you can override the styles of an individual point by passing it through the data object:
series: [{ data: [29.9, 106, { y: 135, dataLabels: { style: { fontSize: 20 } } }]
I was able to get dynamic styles by iterating over my data before passing the whole object to Highcharts to render.
score:6
Here's what I ended up with. The setTimeout is necessary or the dataLabel property doesn't exist on the point:
formatter: function () {
var point = this.point;
window.setTimeout(function () {
if (point.s < 0) {
point.dataLabel.attr({
y: point.plotY + 20
});
}
});
//this.series.options.dataLabels.y = -6;
var sty = this.point.s < 0 ? 'color:#d00' : 'color:#090;' //other style has no effect:(
return '<span style="' + sty + '">' + Math.abs(this.point.s) + '</span>';
}
Source: stackoverflow.com
Related Query
- Is it possible to position Highcharts dataLabels depending on the value?
- put condition depending on the value HIGHCHARTS
- How to set Highcharts xAxis position on the yAxis zero value (negative/positive chart)?
- Position highcharts datalabels to the left of positive bars and to the right of negative bars
- HighCharts : Is it possible to customize the colors of individual series?
- How to display the value instead of percentage in a pie chart using jquery Highcharts
- How replicate the value of Y Axis on both sides of the axis in Highcharts
- Possible to connect the zoom on two Highcharts graphs?
- How do I get the value of a highcharts graph point on mouseover?
- Is it possible to hide the line & symbol next to Highcharts legend items?
- Is it possible to hide the navigator in highcharts at runtime?
- Is it possible to position the zoom buttons in highcharts/highstock?
- Fix Highcharts dataLabels to the bottom
- Getting the X Axis value in HighCharts
- In highcharts, is it possible get the exact position of x axis labels for overlap detection purpose?
- Is it possible in highcharts to have 2 charts, sharing the same x-axis, but next to one another?
- highcharts data labels overlaps the plotlines value
- yAxis tickinterval in highcharts is not working as per the value
- Is it possible to set Highcharts to hide tooltip when the mouse pointer is 30px away
- DataLabels in Highcharts are outside the container / not showing
- How to remove the value and number labels from Highcharts angular gauge
- HighCharts - Show categories in x axis intead of the value of x in Bubble Chart
- Highcharts show the same yAxis start and end value with multiple data series
- I had created a scatterplot using Highcharts but the the point.z value is not getting displayed in tooltip
- Setting highcharts datalabels backgroundColor with the same color of its serie
- how to display 2 same highcharts without duplicate the code
- Is there a way to change the display value in series using highcharts
- Is to possible to delay the needle loading animation in Highcharts angular gauge?
- Highcharts - position column chart from the top
- Change color code on colum, depending on data value (highchartJS)
More Query from same tag
- highchart in popover - bootstrap 4
- blank page highchart in using jquery to call json arrary
- Pie chat dynamic drilldown(3levels) using highchatjs
- Highcharts - Remove first marker from Area chart in every series
- Getting 'Cannot read property "length" from undefined' exception while rendering chart at JasperReports Server
- highcharts context menu hidden for small charts
- Highstock Change date format dynamically on clicking range selector button
- Cannot read property 'cum' of undefined -- when creating a stacked area chart with xAxis.type=datetime
- Highcharts with PHP var
- Highcharts: dynamic update stacked area with extra custom data
- Change from graph/Highcharts to maps/Highmaps in my API
- Highcharts range selector doesn'n work
- xAxis values groups as slices + labels in Highcharts
- Angular 7 - Highcharts title not changing
- highcharts string in data: [ ]
- Angular HighCharts Show All Elements even there are big differance between amounts
- Highcharts save a chart in the project folder instead of downloads folder using javascript
- How do I scrape data from a highcharts graph in python?
- How to create a range between series?
- Redraw same highchart
- HighCharts to support RTL
- Highchart axis hover
- How to create a div container for a highcharts graphic by means of code?
- Highcharts slow performance when adding more than 10 series
- Added series does not remains in highcharts on show/hide of chart container
- How to make hightcharts tooltip scrollable after it displays?
- JSON format for Highcharts line and bar graph
- highstocks chart showing extra month
- Format tooltip in highchart map for dynamic variables, some with commas and others with percents
- Highcharts Combination Chart: Column covering line series marker