I recently upgraded highcharts v2.3.3 to 4.0.3, and find my xAxis cannot display correctly after this.
I have a 3 year monthly chart like this: JSFiddle example
After zoom to a detail level, and then reset zoom the xAxis label in the selected area disappear:
Is there any method to fix the problem? thanks a lot!
I found that the maxStaggerLines caused the problem, but I don't want it separate into 2 lines. How can I solve this?
I also find that if I set maxStaggerLines: 1 in another chart, some label will disappear. Can I turn the auto stagger line/auto detect label overlap function off?
My chart code:
$(function () {
var startYear = '2012';
var dataSet = [];
for (var i = 0; i < 36; i++)
dataSet.push(15);
var series = [];
series.push({data: dataSet});
var xCategoriesMonth = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var xCategoriesYear = [];
for (var i = parseInt(startYear) ; i < (parseInt(startYear) + 3) ; i++)
for (var x = 0; x < 12 ; x++)
xCategoriesYear.push(i);
$('#container').highcharts({
chart: {
zoomType: 'x',
type: 'line',
height: 380,
},
xAxis: {
type: "category",
labels: {
formatter: function () {
var ex = this.axis.getExtremes();
if ((ex.max - ex.min) > 12) {
if (this.value % 3 == 0) {
if (xCategoriesMonth[this.value] == "Jan")
return xCategoriesMonth[this.value] + '<br>' + xCategoriesYear[this.value];
else
return xCategoriesMonth[this.value];
}
}
else {
if (this.value % 3 == 0)
return xCategoriesMonth[this.value] + '<br>' + xCategoriesYear[this.value];
else
return xCategoriesMonth[this.value];
}
},
maxStaggerLines: 1,
},
tickPixelInterval: $('#container').width() / 36,
title: {
text: 'testing',
offset: 50
},
showLastLabel: false,
startOnTick: false,
endOnTick: true,
minPadding: 0,
maxPadding: 0,
},
yAxis: {
lineWidth: 1,
},
plotOptions: {
series: {
allowPointSelect: true,
lineWidth: 1,
connectNulls: true,
},
},
series: series,
});
});
I had similar issue. For me solution was to add tickInterval: 1 option.
Look to this ticket
https://github.com/highslide-software/highcharts.com/issues/4399
Related
I have a stacked bar graph with two data attributes. I want to make the second bar looked grayed out with a dashed border. I've tried "dashStyle: 'longdash' but that and anything else i've tried doesn't work.
This is the look i'm going for:
In general it's not supported, but simple hack can enable this: http://jsfiddle.net/ztRF5/132/ (note: required is latest version from github).
// mapping between SVG attributes and the corresponding options
Highcharts.seriesTypes.bar.prototype.pointAttrToOptions.dashstyle = 'dashStyle';
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
bar: {
stacking: 'percent'
}
},
series: [{
data: [29.9],
borderColor: 'black',
borderWidth: 2,
dashStyle: 'dash'
}, {
data: [13]
}]
});
Notice that in the latest version of HighCharts, Highcharts.seriesTypes.bar.prototype.pointAttrToOptions is no longer defined, thus the code will error out. You can simply comment out the first line (Highcharts.seriesTypes.bar.prototype.pointAttrToOptions.dashstyle = 'dashStyle';) and it will work. (http://jsfiddle.net/willieliao/6c48x39v/)
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
bar: {
stacking: 'percent'
}
},
series: [{
data: [29.9],
borderColor: 'black',
borderWidth: 2,
dashStyle: 'dash'
}, {
data: [13]
}]
});
I want to render a histogram/line chart using HighCharts.
I don't want to hard code the array which is used by series.
My data that I wish to render is in the object display, which looks like:
0: o, 107983,
1: 1, 347923,
2: 2, 182329,
.
.
.
My code is here:
function RenderChart(display) {
myDisplay = display;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Metric histogram'
},
xAxis: {
//categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
minPadding: 0.05,
maxPadding: 0.05
},
plotOptions: {
line: {
animation: false
},
column: {
groupPadding: 0,
pointPadding: 0,
borderWidth: 0
}
},
series: [{
data: [myDisplay]
}]
});
};
This doesn't render the line chart. It renders an empty chart.
run a routine such that the response you get is processed as accepted by the highchart. then you can assign the resultant to the data directly.
try this, it will work
I've been looking all over, and testing one million things now. I just can't get it to work. I want the numbers to show up as "99 999" instead of "99,999".
Yes, I eventually found "thousandsSep", but it seems to be ignored completely. All my numbers show up as "99,999" even when I have "lang: { thousandsSep: ' ' }" and whatnot.
Please help.
thousandsSep works for me:
Highcharts.setOptions({
lang: {
thousandsSep: ' '
}
});
$('#container').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled : true
}
}
},
series: [{
data: [10029, 1715, 1006, 1292, 14400, 1760, 135, 1480, 10216, 1194, 1956, 1544]
}]
});
http://jsfiddle.net/FPF2t/
Highcharts can connect a series line between null values, but it appears that it cannot connect a line between points with value of 0 if the yAxis min is also set to 0. Is there a workaround?
Here's an example: http://jsfiddle.net/p2EYM/2/
What the chart looks like (note breaks in line):
and the Highcharts code:
$(function () {
$('#container').highcharts({
title: {
text: 'Points with zero value are not connected by line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
offset: 10,
},
plotOptions: {
series: {
connectNulls: true
}
},
yAxis: {
min: 0,
},
series: [{
data: [20, 0, 0, 0, 0, 40, 50, 10, null, null, 0, 0]
}]
});
});
I was creating chart with an additional legend at the bottom with exporting functionality.
Now I've got a strange effect: When opening the printing context menu and choosing one of the download options (PNG/JPG/PDF/SVG) the menu in the bottom of the chart gets duplicated.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
navigation: {
buttonOptions: {
y: 50
}
},
series: [
{ data: [45.9, 50.2, 45.5, 198.4, 50.2] },
{ data: [68.5, 176.0, 50.1, 123.2, 25.9] },
{ data: [176.4, 50.2, 186.9, 56.6, 58.3] }
]
},
function(chart){
$(chart.series).each(function(i, serie){
$('<li style="color: ' + serie.color + '">' + serie.name + '</li>').click(function(){
serie.visible ? serie.hide() : serie.show();
}).appendTo('#legend')
})
});
Any ideas to avoid this?
You can try here: http://jsfiddle.net/pepesale/NTjsJ/4/
Looks weird. However you can check if the UL is empty before appending.
function(chart){
//Check the list is Empty before appending...
if($('#legend').is(":empty")) {
$(chart.series).each(function(i, serie){
$('<li style="color: '+serie.color+'">'+serie.name+' ('+ serie.symbol + ')</li>').click(function(){
serie.visible ? serie.hide() : serie.show();
}).appendTo('#legend');
});
}
});