score:4
I use the "isInside" value like so:
series: [{
name: 'Percentage',
data: this.calculateChartSeries(),
dataLabels: {
enabled: true,
rotation: 0,
align: 'right',
borderWidth: 1,
formatter: function() {
if (this.point.isInside == true) {
return '<span style="color: white">' + this.y + '%</span>';
} else {
return '<span style="color: black">' + this.y + '%</span>';
}
}
}
}]
But if that doesn't work for you, it's possible to use "this.point.shapeArgs.height" and check if that height is greater than the length of your text.
score:4
You can set the color to contrast
, and it will change depending on whether the dataLabel is inside/outside the bar.
style: {
color: 'contrast'
}
score:5
Possible solution is to use formatter. Determine if value is lower than some level, and then change dataLabel color. For example: http://jsfiddle.net/Yrygy/176/
formatter: function() {
var max = this.series.yAxis.max,
color = this.y / max < 0.05 ? 'black' : 'white'; // 5% width
return '<span style="color: ' + color + '">' + this.y + ' M</span>';
},
You can also compare point's width with length of y-value string.
Source: stackoverflow.com
Related Query
- Can color of data label be different inside and outside of the bar in Highchart
- Can color of data label be different inside and outside of the bar in Highchart, even if it has negative numbers?
- How to set series-label to false by default and change the color of series label text in highchart
- Data label is getting shown inside of the bar in sometimes
- Unable to create Highchart where i can show different - different data on clicking category and series
- realign Labels inside and outside the bar chart on highcharts
- High Charts PieChart How Can I show point value inside segment and label name outside
- Highcharts: How to pass the color parameter with data and dates to the bar chart?
- How can I do in Highchart to have 1px space between the columns and the y Axis?
- In highcharts's stacked bar chart, how can I remove the white space between different
- How can I show the label next to the bar in r highcharter?
- highcharts donut pie - different color for the data than its drilldown
- highcharts pie dynamic label inside and outside for each slice
- How can I put custom color in High Charts PIE data | Slice and want to change slice text
- How can I have both a legend and data labels, with different labels, in Highcharts?
- Highchart: Can I use a different variable as the data labels?
- HighChart Data label issue in bar chart
- How can i export row data from highchart to excel file and not csv?
- how to show data json to 2 different highchart bar
- highchart - label color by based on point data
- Can we have tickposition both outside and inside in highcharts?
- Adding a label to the left and to the right of a bar in highcharts
- In Highchart legend, the label color is the same with the color of shape
- How can i load external json data in highcharts to show the bar chart
- How can I prepare a Group Stacked Bar Chart in Highcharts using multiple and different types of data?
- Bar chart data label and bar custom css with bar background,Highchart
- Highchart bar chart: X-Axis label is cut off even when there is space between chart and label
- Highchart graph inside leaflet popup using geojson data and oneachfeature
- How to adjust the height and width of background color in Highchart
- why foreach doesn't work inside my highchart and when i splet the array it works?
More Query from same tag
- Fonts are not showing up in the Export server rendered files
- HighCharts/Javascript: Resample Monthly Data Series to Quarterly/Yearly?
- Displaying additional text for Highcharts Bubble chart
- Panning in Highcharts (In Mobile Devices)
- How can I fix the error #17 "The requested series type does not exist" error when trying to display a highcharts graph in Vue.js?
- Highcharts API legend doesnt appear
- Need to render charts in my view but it returns Undefined variable: chart
- Duplicate Series in the legend when exporting
- How to select a region of a Highcharts by a Javascript
- Wordpress plugin : Yop Poll with pie chart
- Highcharts tooltip not working
- spline chart highchart to fill the color in series
- Highstocks is rounding all of my data
- How to remove fine white line between halo and Highcharts pie chart
- Highcharts exceeds the container in chrome
- HighCharts PieChart with just one segment doesn't show a label
- Is there a way to have two colorAxis in highcharts heatmap?
- Highcharts How to change align of data labels based on value
- How to expand same chart in the highcharts on bootstrap modal onclick a thumbnail chart in angular 6
- Highcharts - data day sum one day ahead
- How to create an average line for an irregular time graph?
- Dynamically set dragmax using dragable points for Highcharts
- Highcharts Label Date Format
- Highcharts pie chart hide zero sector
- Highcharts dataLabels not showing in all levels of drilldown
- Highcharts + Plotband tooltip hover + default styling
- Remove HighChart Rendered Button
- Highcharts acting weird in chrome 30.0.1599.69
- How to show the json data in Pie chart HighChart?
- Highcharts date inaccuracy