score:2
Accepted answer
Creating my own JSFiddle to work with, it appears the configuration useHTML is case-sensitive and changing useHTML
to useHTML
correctly creates Δ
in the categories
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Catawba Average Points'
},
xAxis: {
categories: ['Emergency TS Δs', 'Column B', 'Column C', 'Column D', 'Column E', 'Column F', 'Column G'],
labels: {
useHTML: true
}
},
plotOptions: {
bar: {
stacking: 'normal',
groupPadding: 0.10,
pointPadding: 0,
dataLabels: {
enabled: true,
alignt: 'right',
formatter: function() {
if (this.y != 0) {
return this.y;
}
}
}
}
},
series: [{
name: '(-) Var',
data: [0, 0, 0, 0, 0, 2, 0, 0],
color: '#ffa6a6',
stack: '2017Q3',
showInLegend: false
}, {
name: '(+) Var',
data: [0, 0, 0, 0, .1, 0, 0, 5.10],
color: '#a6e3c2',
stack: '2017Q2',
showInLegend: false
}, {
name: '2017Q3',
color: '#d9d9d9',
data: [10, 15, 10, 10, 3.1, 0, 25, 15],
stack: '2017Q3'
}, {
name: '2017Q2',
color: '#f2f2f2',
data: [10, 15, 10, 10, 3.0, 2, 25, 9.90],
stack: '2017Q2'
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>
score:1
You could try the unicode representation as \u0394
. This appears to work with labels.useHTML: true
.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Catawba Average Points'
},
xAxis: {
categories: ['Emergency TS \u0394s', 'Column B', 'Column C', 'Column D', 'Column E', 'Column F', 'Column G'],
labels: {useHtml: true}
},
plotOptions: {
bar: {
stacking: 'normal',
groupPadding: 0.10,
pointPadding: 0,
dataLabels: {
enabled: true,
alignt: 'right',
formatter: function(){
if(this.y != 0){
return this.y;
}
}
}
}
},
series: [{
name: '(-) Var',
data: [0, 0, 0, 0, 0, 2, 0, 0],
color: '#ffa6a6',
stack: '2017Q3'
}, {
name: '(+) Var',
data: [0, 0, 0, 0, .1, 0, 0, 5.10],
color: '#a6e3c2',
stack: '2017Q2'
}, {
name: '2017Q3',
color: '#d9d9d9',
data: [10, 15, 10, 10, 3.1, 0, 25, 15],
stack: '2017Q3'
}, {
name: '2017Q2',
color: '#f2f2f2',
data: [10, 15, 10, 10, 3.0, 2, 25, 9.90],
stack: '2017Q2'
}]
});
Source: stackoverflow.com
Related Query
- How to display tooltip data below x-axis category labels using Highcharts
- How to display Δ in Highcharts category labels?
- how to display 2 same highcharts without duplicate the code
- How to make the Y Axis values not start from 0 in highcharts? How to display forcefully display the last category data on X axis in HighCharts ?
- How can I display crosshair labels on top of the chart with Highcharts
- How to display Highcharts x-axis time stamp labels inside tooltip?
- How do I display category names instead of point.y in Highcharts scatterplot?
- How to display months in x axis labels in highcharts
- how to display data labels / stacklabels for a grouped highhcarts- Highcharts
- How to display only one x-axis labels in Highcharts synchronized charts
- How to display full text in data labels in sunburst highcharts
- How do you change the colour of each category within a highcharts column chart?
- How to display the value instead of percentage in a pie chart using jquery Highcharts
- Always display data labels above columns in HighCharts
- How to hide labels in the highcharts in the pie
- How to display No Data Available Message in highcharts
- How to prevent highcharts from shortening labels with ellipsis
- Highcharts - How to display legend symbol inside the tooltip
- Highcharts overlapping category labels
- Highcharts : Display the labels (min, max, median etc.) in boxplot
- How do I style the series labels on a Highcharts pie chart?
- How to display highcharts in ng-repeat angularjs
- r- how to display the labels on the highcharter objects all the time
- Highcharts : How to fix labels to the top when xAxis rotation is 90°?
- How to display HighCharts with tables
- How to add background colors to category groupings in Highcharts
- How do I use Highcharts to display candlestick with small values?
- How to adjust line-height/ellipses in Highcharts axis labels
- How can I hide and show a category in highcharts
- How to position labels for plotbands on y axis in Highcharts
More Query from same tag
- How to specify a range of data when using HighCharts with <table>?
- How to have different cursor style for legends in Highcharts?
- how to pass database values in Yii2 Highchart
- Highcharts - Sunburst partition
- highcharts - does not create with ajax
- Highstock chart not rendered when using load event
- how do you create highcharts bar chart
- How to pass a JSON through a variable to highchart heatmap data tag?
- Highcharts: setSize on each Multiple chart
- Using Trellis Chart with Stacked Columns in Highcharts
- Highcharts (highstock) anyway to detect maximum value in a series
- How do I place the labels next to the series on a split packed bubble chart?
- how to get tow series data in highchart guage chart
- Two different data range for Y-axis in DotNet Highchart
- How to use image on label depending on data?
- Highchart Callback Refactoring not working, and how to display multiple series using multiple Ajax data
- Linking issue between python script, flask framework, and html
- Linking highcharts text renderer to javascript function
- x axis label word wrap in high charts for radar chart
- How to do a if else statement for highcharts in laravel
- How do I make a Tornado Chart using Highcharts
- Why ReactHighcharts SolidGauge's rounded is not working in react
- Highcharts title animation
- HighCharts + reveal.js chart size
- Highcharts - Add a pie chart to a line chart
- Highcharts range selector date formats from C#
- Highcharts Line Chart with Only x-axis
- Highstock Angular value in legend
- On Export The Updated yAxis Title Is Lost
- Can I add an "average" line to Highcharts Chart?