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/
Related
I want my chart to start from left most corner from zero and without the gap. Please help me to out on this.
Here is my chart: http://jsfiddle.net/ssarabando/egQH8/2/
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
min: 0
},
yAxis: {
min: 0,
max: 100, startOnTick: false
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 0, 0, 0, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});
Here is the screen shot of what I'm talking about:
http://awesomescreenshot.com/0c347ofz76
categories and startOnTick doesn't work well together. But you can use labels, tickInterval and min/maxPadding together like this to make it work:
var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickInterval: 1,
minPadding: 0,
maxPadding: 0,
startOnTick: true,
}
Here's the DEMO
You can set min/max values and tickmarkPlacement as 'on'.
Example: http://jsfiddle.net/egQH8/30/
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 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
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 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');
});
}
});