I have highstocks set up to display two series of data.
When I zoom all the way the x-axis label for one of the series is always missing.
jsfiddle link
$(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart = new Highcharts.StockChart({
chart: {
"renderTo": "container"
},
plotOptions: {
"column": {
"stacking": "normal"
}
},
series: [{
"type": "column",
"name": "column 1",
"color": "#1d8ecd",
"data": [
[1296511200000, 974],
[1301605200000, 1618],
[1306875600000, 990],
[1312146000000, 1720],
[1317416400000, 516],
[1322690400000, 1472],
[1328047200000, 349],
[1333227600000, 1781],
[1338498000000, 649],
[1343768400000, 1124],
[1349038800000, 829],
[1354312800000, 1615],
[1359669600000, 1181]
]
}, {
"type": "column",
"name": "column 2",
"color": "#636466",
"data": [
[1293832800000, 1913],
[1298930400000, 1269],
[1304197200000, 567],
[1309467600000, 668],
[1314824400000, 722],
[1320098400000, 442],
[1325368800000, 1558],
[1330552800000, 1831],
[1335819600000, 373],
[1341090000000, 275],
[1346446800000, 1540],
[1351720800000, 998]
]
}],
});
});
Any ideas why is this happening and if I can force it to display all x-axis labels, at least when there is space for it?
Related
How can I a display an image (small icon) in a tooltip within Highmaps?
I know this question has been asked before - here - but damned if I can get it to work. I even wonder if it is possible, because as far as I can see in their API docs, the Highmaps support for HTML is limited, as eg here and does not include the img tag.
I have create a jsfiddle here with some sample icons. I'd be grateful if someone could demo how to add these to the tooltips (one per tooltip, of course)
$('#container').highcharts('Map', {
title: {
"text": "Simple Map"
},
series: [
{
"name": "Colours",
"type": "map",
"tooltip": {
"headerFormat": "",
"pointFormat": "{point.name}"
},
"data": [
{
"name": "Blue<br>violets",
"path": "M0,-994L204,-994L203,-480,0,-477z"
},
{
"name": "Yellow<br>is the colour of...",
"path": "M204,-994L455,-994L457,-477,203,-480z"
},
{
"name": "Red<br>sky at night",
"path": "M455,-994,697,-991,700,-481,457,-477z"
},
{
"name": "Green<br>grass",
"path": "M697,-991,998,-992,1000,-480,700,-481z"
}
]
}
]
});
You need to enable the useHTML parameter and link a displayed picture with a point, for example:
series: [{
...,
"data": [{
...,
tooltipImg: 'left'
},
{
...,
tooltipImg: 'right'
},
...
]
}],
tooltip: {
useHTML: true,
formatter: function() {
return this.point.name +
'<br><img src="http://icons.iconarchive.com/icons/saki/nuoveXT/128/Small-arrow-' +
this.point.tooltipImg + '-icon.png" width="32" height="32">'
}
}
Live demo: https://jsfiddle.net/BlackLabel/9bujq56y/
API Reference: https://api.highcharts.com/highmaps/tooltip.useHTML
How can I prevent this space:
I try a lot but no success.
Here is my options:
$('#container').highcharts({
"chart": {
"type": "column"
},
"xAxis": {
"categories": ["1/1/2018", "2/1/2018", "3/1/2018"]
},
"legend": {
"enabled": false
},
"yAxis": {
"categories": []
},
"series": [{
"data": [1, 3, 1]
}]
});
JSFiddle link
Thanks in advance.
Remove the empty category definition on the yAxis to make highchart automatically generate values for the yAxis:
$('#container').highcharts({
"chart": {
"type": "column"
},
"xAxis": {
"categories": ["1/1/2018", "2/1/2018", "3/1/2018"]
},
"legend": {
"enabled": false
},
"yAxis": {
},
"series": [{
"data": [1, 3, 1]
}]
});
JSFiddle working example: http://jsfiddle.net/ewolden/sq1hf68r/
http://jsfiddle.net/ramon_ackermann/PhjX7/2/
$(function () {
$('#container').highcharts({
chart: {
type:'column'
},
xAxis: {
min:0,
max:0,
categories: ["test"]
},
series: [{
"name": "ABELO",
"data": [
0.73
]
},{
"name": "UAAU",
"data": [
0.77
]
},{
"name": "ANCB",
"data": [
1.72
]
},
{
"name": "avg",
"type": "line",
"color": "#ff0000",
"data": [
{
"x": -0.5,
"y": 1.5
},{
"y": 1.5,
"dataLabels": {
"enabled": true,
"align": "right",
"verticalAlign": "bottom",
"formatter": function(){
return 'avg: ' + this.y;
},
"style": {
"fontWeight": "normal"
},
"x": 0.5
}
}
]
}
]
});
});
Before updgrading to Highcharts 3, the code above would work properly, drawing the line from left to right, but since I'm trying to upgrade to v3, I can't get the line to draw all the way to the right.
I devised the above solution from my previous question / answers (highcharts line not fully plotted)
The above sample is a simplified version of what I need, unfortunately plotLines is not a solution for me.
Simple solution is to extend another point onto your avg line:
...,{"x": 1.5, "y": 1.5}]
Why is a plotLine not appropriate?
I advice to use plotLine or use renderer.
http://api.highcharts.com/highcharts#yAxis.plotLines
http://api.highcharts.com/highcharts#Renderer.path
Is it possible to get the x-axis names from a string in my series list? I'm building this series list on the backend and would like to use the "New York", "LA" and "Chicago" as my x-axis category values.
I would expect "New York", "LA" and "Chicago" as my x-axis labels, however, I'm getting -0.25 through 2.25.
Thanks.
http://jsfiddle.net/nicholasduffy/H7zgb/2/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false
}
}
},
series: [{
"data": [
["New York", 3570.5],
["LA", 50128.38],
["Chicago", 5281.22]
],
"name": "Stuff"
}, {
"data": [
["New York", 10140.84],
["LA", 21445.04],
["Chicago", 12957.77]
],
"name": "Junk"
}, {
"data": [
["New York", 65119.6],
["LA", 103118.6],
["Chicago", 78349.6]
],
"name": "Other Stuff"
}]
});
});
As of HighCharts 3 you can use xAxis.type and set it to "category" for your desired behavior without having to specify the category names.
http://api.highcharts.com/highcharts#xAxis.type
I've edited the jFiddle to have the following:
xAxis: {
type: "category"
}
http://jsfiddle.net/H7zgb/22/
I believe you are looking for this...
http://api.highcharts.com/highcharts#xAxis.categories
Take a look at this fiddle...I've added the following:
xAxis: {
categories: ["New York", "LA", "Chicago"]
},
http://jsfiddle.net/H7zgb/3/
I am trying to display to my users the number of videos recorded per day with each one of their cameras. To do so I would like to use a stacked back (each stack showing the # of videos recorded with a given camera). Here are the options I am passing in:
var options = {
"title": {
"text": null
},
"legend": {
"layout": "vertical",
"style": { },
"enabled": false
},
"xAxis": {
"type": "datetime",
"minTickInterval": 86400000
},
"yAxis": {
"stackLabels": { "enabled": true },
"title": { "text": null }
},
"tooltip": { "enabled": true },
"credits": { "enabled": false },
"plotOptions": {
"column": { "stacking": "normal" }
},
"chart": {
"defaultSeriesType": "column",
"height": 200,
"borderRadius": 0,
"renderTo": "monthy_chart"
},
"subtitle": { },
"colors": [ "#c7084b","#089fbf","#00d047","#d300d1","#f48400","#f6f400" ],
"series": [
{
"name": "Camera",
"data": [ [ 1362614400000,6 ],[ 1362528000000,2 ] ]
},
{
"name": "NewCamera2",
"data": [ [ 1362614400000,1 ] ]
}
]
};
The graph displays the data correctly but is rendering the columns extremely narrowly even when there are only 2 days of data (image below). Is there a way for me to deine the scale of the x-axis so the widths of the columns will display a bit better?
http://i.stack.imgur.com/NSSYg.png
You can set pointWidth and startOnTick / endOfTick
http://jsfiddle.net/bLrah/
"xAxis": {
startOnTick:true,
endOnTick:true,
"type": "datetime",
"minTickInterval": 86400000
http://api.highcharts.com/highcharts#xAxis.startOnTick
http://api.highcharts.com/highcharts#xAxis.endOnTick
http://api.highcharts.com/highcharts#plotOptions.column.pointWidth