score:1
Accepted answer
You can write your own function to move labels.
Get bbox of the label element and check if it is inside the container (>= 0 or <= container's width). One caveat in getting bbox - the labels are rotated, so it means that the bbox you get has params of the element which is not rotated yet - in your case when the rotation does not change text width a lot - you can add some pixels to offset that difference.
function moveLabels() {
const ticks = this.xAxis[0].ticks;
const safeDistance = 10;
Object.keys(ticks).forEach(value => {
const label = ticks[value].label;
const bbox = label.getBBox(true);
if (bbox.y >= 0) {
if (bbox.x - safeDistance < 0) {
label.attr({
x: label.xy.x + Math.abs(bbox.x - safeDistance)
})
} else if (bbox.x + bbox.width + safeDistance > this.chartWidth) {
label.attr({
x: label.xy.x - (bbox.x + bbox.width + safeDistance - this.chartWidth)
});
}
}
})
}
Move labels on load/redraw events:
chart: {
polar: true,
type: 'line',
events: {
load: moveLabels,
redraw: moveLabels
}
},
example: https://jsfiddle.net/nd5fob5d/
Source: stackoverflow.com
Related Query
- x axis label word wrap in high charts for radar chart
- High Charts Column Chart - Y axis Label Formatting
- ChartJS/High Charts Radar chart - Different radial axis labels for each category that appear on hover
- In high chart how to add event for label click
- Laravel 5.5 Console TV Bar Chart High Charts multipleDatasets and label
- High Charts : Equal spacing for X Axis for unequal interval
- JasperReports: HTML5 high chart X Axis label font size
- tickinterval not working high chart for x axis
- Highcharts display label for pie chart using html table as data source
- Highcharts drilldown to pie chart - Clicking on axis label with multiple series causes pie charts to overlap
- High Charts Multiple Line Chart not displaying tooltip for multiple lines
- React / High chart / Stacked bar label for each block
- Angular 7 High Charts Stock Chart Datetime X Axis tooltip formatting independently of other tooltips
- Grouping x axis labels for histogram in high charts
- how to limit the label size only for bubble diameter in high charts
- High Charts for an area-spline chart with area fill on only one data set in series
- High charts bar chart label overlaps with the graph when labels are long
- Is there a way to config high chart Y Axis label to appear larger?
- Formatting axis label in high chart using dynamic values
- knockoutJS dynamic chart with high charts
- How to set the x value for High Charts error bar
- How to use add series and update methods in the high chart wrapper for angular?
- dynamically creating the values for high charts
- Fire click event on a highchart column drilldown chart on clicking x axis for drill down reports
- High charts queue chart updates after ajax with multiple charts in firefox
- Convert the y-axis values to Millions in dual axis high charts
- High charts - Increasing the space between chart and title
- Too long chart axis label title
- HighCharts: How to display unique text for yAxis Label in a spline chart
- High charts AddAnnotation is not a function for dynamic adding
More Query from same tag
- How to center an image in a gauge
- Highstock Data points connected auomatically
- Wants to change the marker color HighCharts
- Change height of Highcharts with JavaScript. By default only re-sizes on window re-size
- Highcharts series update with animation
- Highchart not showing on mobile
- Change onclick event in highchart ,pie chart
- Resize issue while gridster.js with highcharts
- Highcharts - Remove gap between tooltip border and content
- JavaScript charting library to handle shading area between two lines
- Highcharts: changing color on hover ranking chart
- highcharts - precision for stacked column chart data labels
- highcharts redraw() with function that references newly redrawn chart
- How to position heatmap legend title in different position?
- Highcharts - updating series leads to tooltip-related error (mouseOver)
- How to show multiple sets in a Highcharts Venn chart?
- Group Smaller Slices in Pie Charts to Improve Readability
- How to use styled from react-emotion with HighchartsReact?
- R Highcharts heatmap with motion, but motion bar is overlapping with x axis
- Looking for special Highcharts chart
- Random number on Highcharts + AngularJS
- Highcharts map appending unwanted data
- Highcharts Date Time With Irregular Intervals Down to Minutes
- Spline HighChart not plotting lines using angular 4
- getJSON function is not executing
- What are the plotX, plotY values of a point in HighCharts?
- Issues with custom border around Highcharts Stacked Bars and disabling hover effect
- Chart Title on Chart Click Event
- Highstock, click values undefined
- Drilldown in two steps, multiple choice in Highcharts