Develop Reference

After upgrading hightcharts from 4.2.0 to 5.0.7 only a black box is displayed

I have a site where I have used highcharts for some years with no problem. Original version was 4.2.0.
I tried to update to version 5.0.7 by downloading directly from highcharts site. Then, I replaced the corresponding script tags to reflect the change. However, with that change, I only get a black box where the graph should be.
This is how the highchart is initialized:
Highcharts.chart('container', {
chart: {
type: 'column',
backgroundColor: null
},
title: {
text: 'Resumen Comparativo Inter-Zonas País (' + meses[periodo % 100 - 1] + '-' + Math.floor(periodo / 100) + ')',
style: {
"fontSize": "14px"
}
},
credits: {
enabled: false
},
xAxis: {
categories: zonas
},
yAxis: [{
min: 0,
title: {
text: 'Totales por Zonas y País'
}
}, {
min: -1000000000,
title: {
text: 'No Encontrados',
style: {
color: '#B2455E'
}
},
labels: {
style: {
color: '#B2455E'
}
},
opposite: true,
reversed: false
}],
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Repetidos',
type: 'column',
data: getMontosPorCondicion(inventarios, 'REPETIDO', null)
}, {
name: 'Resellados',
type: 'column',
data: getMontosPorCondicion(inventarios, 'RESELLADO', null)
}, {
name: 'Abiertos',
type: 'column',
data: getMontosPorCondicion(inventarios, 'ABIERTO', '#8BBC22')
}, {
color: '#B2455E',
name: 'No Encontrados',
type: 'spline',
yAxis: 1,
marker: {
fillColor: '#FFFFFF',
lineColor: null,
lineWidth: 2
},
data: getMontosPorCondicion(inventarios, 'NO ENCONTRADO', '#B2455E')
}]
});
Any help?

Your copy of highcharts.js might be different from the cdn https://code.highcharts.com/highcharts.js. Replace the codes in your copy with that of the cdn. This should work fine.

You additionally need to add highcharts.css to your page.
As per the highcharts site:
"If you are styling your charts using CSS, load the javascript files from the /js/ directory. For these files, presentational code is removed, and CSS is required to style the chart."

Highcharts multiple y axis with data from csv file

I've been creating charts on my company's website with data that is populated from a csv file. I need to add two additional y axes on the right side of the chart. I tried doing so by following Highchart's instructions, but my data is coming from a CSV file and I can't manage to get the two additional axes to connect to the data. Meaning, the other two splines look flat compared to the one that is actually plotting to it's y axis.
Below is the chart's JS file. The CSV file is 4 columns, which from left to right are Date, Overall, VIX, GSPC
Thank you in advance!
function basi_overall_chart() {
//var to catch any issues while getting data
var jqxhr_basi_overall = $.get('../../datafiles/basi/company_BASI_Overall_VIXSP.csv', function (data) {
var options = {
//chart options
chart: {
//set type of graph, where it renders
type: 'line',
renderTo: 'basi_overall_container'
},
//set title of graph
title: {
text: 'company Bid-Ask Spread Index (BASI)',
style: {
color: '#4D759E'
},
align: 'center'
},
//set xAxis title
xAxis: {
title: {
text: 'Date',
style: {
color: '#4D759E',
fontWeight: 'bold'
}
}
},
//set yAxis info
yAxis: [{
title: {
text: 'Basis Points (BPS)',
style: {
color: '#4D759E',
fontWeight: 'bold'
}
},
labels: {
//give y-axis labels commas for thousands place seperator
formatter: function () {
return Highcharts.numberFormat(this.value);
}
},
//set y-axis to the left side
opposite: false,
//set background grid line width
gridLineWidth: 1
}, { // Second yAxis
gridLineWidth: 1,
title: {
text: 'VIX',
style: {
color: '#de5a3c',
fontWeight: 'bold'
}
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value);
}
},
opposite: true
}, { // Third yAxis
gridLineWidth: 1,
title: {
text: 'SP',
style: {
color: '#4D759E',
fontWeight: 'bold'
}
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value);
}
},
opposite: true
}],
//stylize the tooltip
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
valueDecimals: 4
},
//enable and stylize the legend
legend: {
enabled: true,
layout: 'horizontal',
align: 'center',
borderWidth: 1,
borderRadius: 5,
itemDistance: 20,
reversed: false
},
//set the starting range. 0-5. 5="All", 4="1yr", etc
rangeSelector: {
selected: 5,
allButtonsEnabled: true
},
//set general plot options
plotOptions: {},
//disable credits
credits: {
enabled: false
},
//make download as csv format correctly
navigator: {
series: {
includeInCSVExport: false
}
},
//set name of chart downloads
exporting: {
filename: 'company_basi_overall',
//enable download icon
enabled: true,
//add image to download
chartOptions: {
chart: {
events: {
load: function () {
this.renderer.image('http://www.company.com/images/company_logo2.gif', 90, 75, 300, 48).attr({
opacity: 0.1
}).add();
}
}
},
//remove scrollbar and navigator from downloaded image
scrollbar: {
enabled: false
},
navigator:{
enabled: false
}
},
//make download as csv format correctly
csv: {
dateFormat: '%Y-%m-%d'
}
},
//set graph colors
colors: ['#002244', '#DBBB33', '#43C5F3', '#639741', '#357895'],
//series to be filled by data
series: []
};
//names of labels in order of series. make sure they are the same as series header in data file
var names = ['BASI', 'VIX', 'SP'];
//get csv file, multiply by 100 (divide by .01) and populate chart
readCSV(options, data, 1.0, names);
var chart = new Highcharts.StockChart(options);
})
//catch and display any errors
.fail(function (jqxhr_basi_overall, exception) {
ajaxError(jqxhr_basi_overall, exception, '#basi_overall_container');
});
}
(function () {
//set high level chart options for all charts
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
$('.chart_container').toggle(false);
basi_overall_chart();
$('#basi_overall_container').toggle(true);
all_crossable_volume_chart();
auto_assign_toggle_chart_buttons();
})();

highcharts, stacked column, switchrowsandcolumns

I would like to be able to toggle between my groupings, (time/priority). I have a stacked column chart. there is a option to do this example. But it appears that it may only work with data already in a table, and I am bringing in my data as JSON.
my javascript is:
var chart_ops_support_times = new Highcharts.Chart({
chart: {
renderTo: 'chart_ops_support_times',
type: 'column'
},
title: {
text: '',
align: 'left'
},
subtitle: {
text: ' '
},
xAxis: {
categories: [
'one hour','2 hours','4 hours',
'8 hours','one day','2 days',
'one week','> one week'
]
},
yAxis: {
min: 0,
title: {
text: 'counts'
}
},
legend: {
align: 'left',
verticalAlign: 'top',
floating: true,
borderColor: '#CCC',
borderWidth: 1,
shadow: false,
symbolHeight: 10,
symbolWidth: 10
},
tooltip: {
formatter: function () {
return "<b>" + this.x + "</b><br/>" +
this.series.name + ': ' + this.y + "<br/>" +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: data
});

Data module won't work with JSON.
The Data module provides options for loading data from external sources, like CSV files, HTML tables or Google Spreadsheets, in a convenient way, using a declarative options set.
(http://www.highcharts.com/docs/working-with-data/data-module)
Instead of using data module for this, you could parse your data from JSON to be used one way or another.
Other option is to create hidden HTML table with data from JSON and later use Highcharts with data module and use table.

how to create a column char with highcharts where each column has a different color

I´ve a chart using highcharts, the only problem is that each column has the same column.
What should I do so each column has a different column.
Here is my code:
var charts = [];
$containers = $('#container1');
var datasets = [
{
name: 'Tokyo',
data: [49, 57]
}];
var cat = ['A', 'B'];
console.log(datasets);
$.each(datasets, function(i, dataset) {
console.log(dataset);
charts.push(new Highcharts.Chart({
chart: {
renderTo: $containers[i],
type: 'column',
marginLeft: i === 0 ? 100 : 10
},
title: {
text: dataset.name,
align: 'left',
x: i === 0 ? 90 : 0
},
credits: {
enabled: false
},
xAxis: {
categories: cat,
labels: {
enabled: i === 0
}
},
yAxis: {
allowDecimals: false,
title: {
text: null
}
},
legend: {
enabled: false
},
series: [dataset]
}));
});
Thanks in advance.

To have each column be a different color, all you have to do is set the colorByPoint property to true.
Reference:
http://api.highcharts.com/highcharts#plotOptions.column.colorByPoint
Alternatively you can make each column a separate series, which gives you additional levels of control.
OTOH, in the majority of cases, having each column a separate color serves no purpose except to clutter and confuse the data, and make the user work harder cognitively to interpret the chart.
If you want to highlight a single column for a particular reason, you can do that by adding the fillColor property to the data array:
Something like:
data:[2,4,5,{y:9,fillColor:'rgba(204,0,0,.75)',note:'Wow, look at this one'},4,5,6]

I finally found a way to show more than 1 color for each column:
var charts1 = [];
var $containers1 = $('#container1');
var datasets1 = [{
name: 'Dalias',
data: [29]
},
{
name: 'Lilas',
data: [1]
},
{
name: 'Tulipanes',
data: [15]
}];
$('#container1').highcharts({
chart: {
type: 'column',
backgroundColor: 'transparent'
},
title: {
text: 'Montos pedidos por división'
},
tooltip: {
pointFormat: '<span style="color:{series.color};" />{series.name} </span>:<b>{point.y}</b>',
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
},
series : {
cursor: 'pointer',
point: {
events: {
/*click: function() {
verDetalle("Especialidades,"+ this.series.name);
}*/
}
}
}
},
credits:{
enabled: false
},
yAxis: {
min: 0,
title: {
text: ''
}
},
xAxis: {
categories: ['División']
},
series: datasets1
});

How do I make a Tornado Chart using Highcharts

I am trying to prepare a Tornado Chart using the column chart in Highcharts. Here is my fiddle.
My current code is:
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Net Sales'
},
subtitle: {
text: 'MM $'
},
xAxis: {
categories: ['Annual Revenue', 'Number of Years', 'Annual Costs']
},
yAxis: {
title: {
text: 'MM $'
}
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y;
}
}
},
scatter:{
marker:{
symbol:'line',
lineWidth:11,
radius:8,
lineColor:'#f00'
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[12.15, 46.86],
[15.45, 42.28],
[27.77, 31.24]
]
},
{
name:'Base',type: 'scatter',data:[120],
}]
});
The problem is that the last series (Annual Costs) does not show, as it is in reversed order. Also, I'd like the Tornado Chart to look more like this:
Note that the labels in this chart are different from the actual values plotted. Also note that the bar in the center - in the example code, there would be a vertical line at 29.5. I would also like to support a combined uncertainty bar like the one at the bottom. Any suggestions would be greatly appreciated.

Your last bat is not showing, because first number is lower than second, see: http://jsfiddle.net/kErPt/1/
If you want to display another values at labels, then add that info first. Example:
data: [{
low: 12,
high: 15,
lowLabel: 35,
highLabel: 46
}, {
low: 2,
high: 35,
lowLabel: 15,
highLabel: 26
} ... ]
And then use dataLabels.formatter for series.
To add vertical line use plotLines.
I'm not sure what is the last bar called 'combined uncertainty'.

I've used Highcharts with separate series (thanks jlbriggs) to create a Tornado Chart: http://jsfiddle.net/uRjBp/
var baseValue = 29.5;
var outputTitle = "Net Sales";
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
//type:'column'
//type:'area'
//type:'scatter'
//type:'bubble'
},
credits: {},
exporting: {},
legend: {},
title: {
text: outputTitle
},
subtitle: {
text: "MM $"
},
tooltip: {
formatter: function() {
var msg = "";
var index = this.series.chart.xAxis[0].categories.indexOf(this.x);
var low = round(this.series.chart.series[0].data[index].y+baseValue);
var high = round(this.series.chart.series[1].data[index].y+baseValue);
if (this.x === "Combined Uncertainty") {
msg = "Combined Uncertainty in "+outputTitle+": "+low+" to "+high;
} else {
var lowLabel = this.series.chart.series[0].data[index].label;
var highLabel = this.series.chart.series[1].data[index].label;
msg = '<b>'+outputTitle+'</b> goes from '+ low +' to '+ high+'<br/> when '+this.x +
' goes from <br/> '+lowLabel+" to "+highLabel;
}
return msg;
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function () {
var index = this.series.chart.xAxis[0].categories.indexOf(this.x);
if (this.series.userOptions.labels === undefined) {
return this.y+baseValue;
}
return this.key === "Combined Uncertainty" ? "":this.series.userOptions.labels[index];
}
}
}
},
xAxis: {
title: {
text: 'Factor'
},
allowDecimals:false,
categories: ['Annual Revenue', 'Number of Years', 'Annual Costs', 'Combined Uncertainty']
},
yAxis: {
title: {
text: 'MM $'
},
labels: {
formatter:function() {
return this.value+baseValue;
}
}
},
series:[{
name: 'Low',
grouping:false,
type:'bar',
data:[{y:12.15-baseValue, label:10},{y:15.45-baseValue, label:1},{y:31.25-baseValue, label:2},{y:12.15-baseValue, color:'#99CCFF', label: ""}],
labels:[10,1,2,]
},{
name: 'High',
grouping:false,
type:'bar',
data:[{y:46.86-baseValue, label:30},{y:42.28-baseValue, label:3},{y:27.77-baseValue, label:4},{y:46.86-baseValue, color:'#99CCFF', label:""}],
labels:[30,3,4,]
},
{
name: 'Median',
type: 'scatter',
data: [null,null, null,27-baseValue],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
function round(num) {
return Math.round(num*100)/100;
}

usually, this kind of chart is done using a separate series for the left and right portions
One way to do this is by setting one set of data as negative numbers, and then using the formatters to make the axis labels, datalabels, and tooltips display the absolute values
example:
http://jsfiddle.net/jlbriggs/yPLVP/68/
UPDATE:
to show a line as in your original chart, you can extend the marker symbols to include a line type, and use a scatter series to draw that point:
http://jsfiddle.net/jlbriggs/yPLVP/69/
If you don't want to have the extra code for the line marker type, you could use any of the other existing marker symbols for the scatter series.