Develop Reference

echarts: How to use subscript/superscript (or latex/mathjax) in 3D axis labels?

How do I render superscript or subscript in a 3D chart?
Right now I'm doing like this:
xAxis3D: { scale: true, gridIndex: 0, name: "f0" },
yAxis3D: { scale: true, gridIndex: 1, name: "f1" },
zAxis3D: { scale: true, girdIndex: 2, name: "f2" },
and the y-axis label in the plot looks like this:
Instead of f2, is there any way I can label it like f₂ (similar to f<sub>2</sub> in html)?
Also, is there any way to use latex or mathjax within echarts?

As I know Echarts doesn't have this or similar features. But even if it did, it’s not enough. Need improve the zRender (visualization engine) to support this feature.
I would to recommend for you to capture the values and replace to Unicode symbol in formatter, see example:
var myChart = echarts.init(document.getElementById('main'));
var chars = ['\u00BC', '\u00BD', '\u00BE', '\u2150', '\u2151', '\u2152'];
var option = {
xAxis: [{
data: [0, 1, 2, 3, 4, 5],
axisLabel: {
formatter: (val, idx) => chars[parseInt(val)],
}
}],
yAxis: [{}],
series: [{
name: 'Series',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
Addition:
Online Converter LaTeX expression to Unicode
Ready to use library on npm
P.S. Just for my: have you ever seen JS-charts with embedded Latex?

How can I get the yAxis of Highcharts to display categories instead of number values?

I have this fiddle JSfiddle
Here is the reproduced code:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Heroku', 'Ruby','Lisp','Javascript','Python','PHP']
},
yAxis: {
categories: ['low','medium','high'],
title: {
text: 'expertise',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: [{
data: ['low','high','low','medium','medium']
}]
});
});
If you look at the fiddle the yAxis does not render and has a value of for every x category. I've been looking at the highcharts api, but I can't seem to get this right. The code makes sense to me but I'm obviously doing something wrong. Can someone point out why the YAxis is not displaying correctly?

As mentioned in my comment, you need to supply the numeric value of the category, not the category name.
In the case of categories, the numeric value is the array index.
Also, in your case, the way you are trying to plot the values, I would add an empty category at the beginning, otherwise your first category of low gets plotted as 0, which doesn't seem right.
So,
categories: ['low','medium','high']
Becomes
categories: ['','low','medium','high'],
And
data: ['low','high','low','medium','medium']
Becomes
data: [1,3,1,2,2]
Updated fiddle:
http://jsfiddle.net/jlbriggs/k64boexd/3/

Check this fiddle:
http://jsfiddle.net/navjot227/k64boexd/2/
Trick is to utilize the formatter function. You can use a similar formatter function on y-axis labels too if that's desired. Though it seems like you need it for data labels for this problem.
$(function() {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Heroku', 'Ruby', 'Lisp', 'Javascript', 'Python', 'PHP']
},
yAxis: {
title: {
text: 'expertise',
align: 'high'
},
labels: {
overflow: 'justify',
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function() {
if (this.y == 0) {
return 'low'
} else if (this.y == 1) {
return 'medium'
} else {
console.log(this.y);
return 'high'
}
}
}
}
},
series: [{
data: [0, 2, 0, 1, 1]
}]
});
});

In my opinion, it is kinda unlikely for a line graph to have a y-axis category, since it speaks more of amount or value. In your case, "low, medium, and high" speaks of ranges, with which a certain value can be assigned to any of it.
Thus, Highcharts accepts series data in numeric form. But you can work around it by setting ['low', 'medium', 'high'] in the category attribute of yAxis, then setting series data as an array of number corresponding to the index of the category, i.e. [0,1,1,2,...] and tweaking the tooltip to display the category instead of the y value using formatter attribute.
Here is the code:
$(function() {
yCategories = ['low', 'medium', 'high'];
$('#container').highcharts({
title: {
text: 'Chart with category axes'
},
xAxis: {
categories: ['Heroku', 'Ruby','Lisp','Javascript','Python','PHP']
},
yAxis: {
categories: yCategories
},
tooltip: {
formatter: function() {
return this.point.category + ': ' + yCategories[this.y];
}
},
series: [{
data: [0, 1, 2, 2, 1]
}]
});
});
Here is a working example : JSFiddle

Highcharts column chart stacked not showing all the values

I am creating a column chart with Highcharts and I want to stack the values by time. So the xAxis is of type datetime. This is my config (omitting the less important configuration options):
var chartOptions = {
title: {
text: null
},
chart: {
type: 'column',
zoomType: 'x'
},
xAxis: {
type: 'datetime'
},
series: [
{
name: "test",
type: 'column',
data: [[1432400400000, 2], [1432486800000, 5], [1432573200000, 7]]
},
{
name: "test_1",
type: 'column',
data: [[1432400400000, 2], [1432486800000, 5], [1432573201000, 9]]
}
],
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
}
}
}
}
If the date sent is identical then the stacking is working right but if there is a second of difference, then it's not stacking well, like the third column in the following image:
It's a bit weird because it's showing the numbers. Is there any option for increasing the stacking range to minimum one second or something like that?
Fiddle: Code

Unable to correctly position the tooltip content in HighCharts

I am using HighCharts combination chart to compare a forecast value(indicated by line) and a cumulative value (indicated by column). The cumulative value keeps increasing weekly and I want to be able to see if it reaches the predicted forecast value.
I created a graph in this js fiddle, http://jsfiddle.net/aroauy4t/ .
I have shown the js code below.
$(function () {
$('#container').highcharts({
title: {
text: 'Forecast Vs Cumulative chart'
},
xAxis: {
categories: [' ', ' ', 'Bananas', ' ', ' ']
},
labels: {
items: [{
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
type: 'column',
name: 'Cumulative',
data: [0, 0, 5, 0, 0]
}, {
type: 'line',
name: 'Forecast',
data: [3, 3, 3, 3, 3],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
});
But the tooltip content overflows when the x axis doesn't contain a label like in the image shown below.
How can I get the tooltip to behave without any overflow (like in the image below)

You could also make use of tooltip - useHTML property.
When turned on the tooltip is rendered as excepted.
tooltip: {
useHTML: true
}
http://jsfiddle.net/aroauy4t/2/

I got it to work (I don't know HighCharts very well) by using the following in your js fiddle:
categories: ["\u00A0", "\u00A0", 'Bananas', "\u00A0", "\u00A0"]
00A0 is the unicode character for non-breaking space.
Maybe it will work for you.

Highcharts vertical stacked bar chart with negative values, is it possible?

Is it at all possible to be able to have a vertically stacked bar chart with negative values (using highcharts).
Like this:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-stacked/
series: [{
name: 'John',
data: [5, -3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, -31, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
Unfortunately negative values don't register.
This seems to be a solution:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-negative-stack/
But for visual reasons I need the bars to be vertical.
Any thoughts on a fix would be greatly appreciated!
Thanks,
Tom

I was trying to achieve the same results. Check this fiddle and let me know =]
I used:
chart: {
type: 'column'
},
plotOptions: {
series: {
stacking: 'normal'
}
}
jsfiddle for vertical stacked bars w negatives
EDIT: try changing the type to 'bar'. This will make the chart "columns" go horizontal =]
jsFiddle for horizontal stacked bars w negatives

The Highcharts demo code for a 'Stacked column' does not work for negative values for the simple reason that the y-axis range is limited in the example code. The answer lies in removing the min=0 argument from the yAxis options.
The yAxis options should read
yAxis: {
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
}
With these options in place the example code for the 'Stacked Column' chart will display negative values correctly.

You can use stacked column and then set inverted parameter as true, then chart will be rotated.