score:0
This is how you can use useHTML property at chart title, axis labels, legend labels and data labels -
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
credits : {
enabled : false
},
title: {
text: 'Chart Title<sup>1</sup>',
useHTML : true,
},
xAxis: {
categories: [ 'label1','label2','label3<sup>4</sup>','label4'],
title:{
enabled: false
},
labels: {
useHTML : true,
title: {
enabled: false
}
},
},
yAxis: {
title: {
enabled: false
},
labels: {
useHTML : true,
formatter:function(){
if(this.value != 10){
return this.value;
}else{
return this.value + '<sup> 2</sup>';
}
}
}
},
legend: {
useHTML : true,
borderWidth: 0,
labelFormatter:function(){
if(this.name != 'legend1'){
return this.name;
}else{
return this.name + '<sup> 5</sup>';
}
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
useHTML : true,
y:-1,
formatter:function(){
if(this.y != 0){
if(this.y > 8 && this.y < 10){
return this.y + '<sup> 3</sup>';
}else{
return this.y;
}
}else{
return null;
}
}
}
}
},
series: [{
data: [{
y: 14.913
}, {
y: 8.281
}, {
y: 3.592
}, {
y: 3.017
}],
showInLegend: false,
},{
name: 'legend1',
color: 'rgb(14,178,89)'
},{
name: 'legend2',
color: 'rgb(100,100,9)'
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
score:11
Consider using useHTML
property:
...
//some options
title: {
useHTML: true,
text: "<sub>sub</sub>normal<sup>sup</sup>"
}
//other options
...
Source: stackoverflow.com
Related Query
- display content on highcharts Xaxis and Yaxis title in form of subscript and superscript
- Highcharts - how to properly update series[0].data and yAxis title of a VUMeter?
- Highcharts plotLines with multiple xAxis and yAxis
- How to Display Month and Year in xAxis of Highcharts datetime graph
- Change xAxis and yAxis title of drilldown chart after entering into second series
- highcharts stacked columns and spline messed up yAxis display
- How to get xAxis and yAxis information on a Highcharts heatmap click event?
- How to remove default Hover text and display the custom text title on hover Donut chart Highcharts
- Highcharts data labels not showing on multiple xAxis and yAxis
- Highcharts rounding yaxis and xaxis digits
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- Plotting seconds, minutes and hours on the yAxis with Highcharts
- Possible to use xAxis with type "datetime" and yAxis with categories?
- Remove space between yAxis and data in highcharts
- Highcharts - yAxis logarithmic scale and allowDecimals set to false not seeming to have any effect
- How to add image in Highcharts Title and subtitle
- Ajax and Highcharts - Display 'loading' until data is retrieved, then populate chart
- Highcharts - Display only year in x axis and stop auto formatting
- Highcharts remove gap between start of xAxis and first value
- remove tooltip space between border and content highcharts
- Display 12 months on Highcharts xAxis
- Highcharts - Global configuration with common code and unique data & Headings
- Show only first and last xAxis label in Highcharts
- Highcharts yAxis title click
- Difference between highcharts and highstock during real time trace and xAxis with max value
- Highcharts doesn't expand <div> to proper height in Chrome/Safari and doesn't display at all in Firefox
- display pie chart using highcharts api and mysql
- *Highchart* Disable Chart Title and display when Download/Print
- Highcharts - synchronized-charts crosshair line and circle point display
- HighCharts - Need more space between bottom of chart and Xaxis labels
More Query from same tag
- how do I process dynamically generated graph with PHP and send the result as an email?
- Show Indicator at last point on Highchart spline chart
- How to get different chart types in same plot
- How to format Ruby array to be used as data in Highcharts
- Issue in drilldown of highcharts multiseries chart
- How do I select which columns from my CSV to chart with HighChart?
- resetting chart title on zoom button click in highcharts
- R Highcharter Issues with adding plotBands on y-axis where hc_yAxis_multiples used
- How to get current drilldown's id in Highcharts
- Treemap with Multiple Series
- Is it possible to put calculation inside plotbands using highcharts?
- Draw custom bars in a Highcharts bar chart
- Highcharts-ng Size does fill div until Inspect Element
- cURL not fetching the expected POST response - error 405
- Javascript event conflict, but not sure how to identify the first event assignment
- How to change highcharts radius according to data
- Highstock Navigator Mask doesn't cover content
- Highcharts - is it support draw scatter line chart?
- Highcharts.js will not render the chart, it says error "Cannot read property 'series' of undefined"
- Representing sparse data in a Highcharts series
- Array as Highcharts series isn't working
- HighCharts Drill down not working
- Alternating x-Axis plotbands with highstock
- using library highcharts with asp.net mvc 3
- Highcharts Sync charts vertically
- Dynamically update tooltip date format highchart
- Angular Highcharts Radial Bar Chart not working as expected
- Show HTML special characters as is
- Highcharts spline chart points not showing unless zoomed in
- Creating dynamic link with ui-sref inserting with highcharts