score:0
The default behavior of Highchart is to wrap the label value in a <tspan>
tag inside of a <text>
tag. Both of those tags seem to get "white-space: nowrap" as a default browser behavior so they do not wrap.
Your jsFiddle example is specifically setting the white-space to "normal" which will allow the text wrap when appropriate. It is acceptable to wrap text on a hyphen so your labels with "Jan-2005" (et al) are going to wrap. If you simply remove the "whiteSpace: 'normal'," element from the style block, they no longer wrap. If you really wanted to make sure they do not wrap you could even change it "whiteSpace: 'nowrap',".
Additionally, the example you linked in your comment does not use HTML so Highchart is actually stripping out your <a>
tag but is nice enough to convert your href="javascript:alert()" code into an onclick event for the <tspan>
score:1
Set style width for your labels inline, see: http://jsfiddle.net/yg2SF/8/
formatter: function() {
return '<div style="width:70px" onclick="alert(\''+this.value+'\')">'+this.value+'</div>';
}
To your comment:
<a>
tags are translated to SVG, <div>
tags with custom onclick aren't.
Source: stackoverflow.com
Related Query
- Issues with xAxis labels and useHTML #1
- HighStocks/HighCharts scrollbar not displaying with large datasets causing xAxis labels to disappear and making bars not show
- Highcharts AreaRange Chart issues with xAxis and last data point label
- Possible to use xAxis with type "datetime" and yAxis with categories?
- Highcharts v3.0.1 problems with rotating data labels in IE8 and jQuery v1.7.1
- Highcharts - Global configuration with common code and unique data & Headings
- Difference between highcharts and highstock during real time trace and xAxis with max value
- HighCharts - Need more space between bottom of chart and Xaxis labels
- Highcharts plotLines with multiple xAxis and yAxis
- Bar with negative stack and positive labels
- HighCharts - how to align (justify) xAxis labels left and right
- Column chart with negative values and categories on xAxis in HighCharts
- Zoom function breaks the xAxis labels and creates chart gaps when exiting zoom
- Highcharts format labels on grouped stacked bar diagram with $ k, M for currency and 'hrs' for time
- Highcharts issue when dealing with 3D pie and large labels
- Highcharts issue when dealing with 3D pie and large labels
- ObHighchartsBundle: custom and set correctly xAxis with datetime and interval from DQL queries
- Semi-circle donut pie chart with labels (data names) and %-ages on the pie ... and data numbers on mousehover
- Print target labels on xAxis with labels.formatter
- How do I customize xAxis labels at start and at end?
- Highcharts with shared and split tooptip, Is there any possible to style the hover xAxis labels?
- Issues with custom border around Highcharts Stacked Bars and disabling hover effect
- Highcharts data labels not showing on multiple xAxis and yAxis
- Formatting XAxis labels when rendering chart on server using phantomjs and JSON
- xAxis labels refuse to align with columns
- Using the source version instead of mimified when import lib with reactjs and npm
- highcharts build map with a set of values and display another set of values as labels
- Highcharts not creating correct amount of labels (steps) in xAxis only first and last labels
- highchart bar using json with series and xAxis data
- In highcharts, how do I get all categories showing with multiple series and xAxis type set to category?
More Query from same tag
- Highcharts datalabel formatter for export server
- I need to show multiple axis, which is having constant values in the x-axis and dynamic values in y-axises
- Overlapping loading of jQuery scripts
- drawing start and end time as intervall in one thick line
- Fixed min and max dynamic time ticks in chart
- On click, passing a variable from Javascript into Rails/Ruby
- Highcharts - is it possible to maintain grouping in scatter chart
- (angular2-highcharts) ERROR in Error encountered resolving symbol values statically
- Highcharts: Position tooltip above the bar on a bar chart
- Milestone Trendanalysis with Highcharts
- How add months as a x-axis to stock chart/ high charts
- How to display basic line graph in Highchart for multiple categories' data from csv?
- Correctly plot time series in Highcharts/Highstock
- Highcharts date-format changes with data
- Redraw Highcharts on Vuejs app
- highcharts line not showing properly
- container .fadeIn/Out with HighCharts and Leaflet
- Highstock cant click on scatter point with line series
- Resize Highcharts chart in Angular UI Modal
- Datatime from CSV file to plot in Highstock JS error
- Multiple series highstock live chart
- Highcharts with DHTMLX menu appearance
- How can I show a highstock graph with a linear timeline
- how to configure highmaps of highcharts in ruby on rails?
- Highchart in new window
- Wanted to plot only one spline at the chart load and further add other splines after loading
- Highcharts issue with max value (100) - React
- Change the background color above a curve
- Highstock stacked bar chart with slider overlayed on the graph
- Java Script Type Error while adding Stock Chart to GWT SimplePanel