The context menu is hidden behind the series when the bar chart series spans across the entire chart. How can I get the menu to not be hidden behind the series?
http://jsfiddle.net/kadams/uy05zby3/2/
$('#container').highcharts({
"chart": {
"type": "bar",
"zoomType": "x"
},
"title": {
"text": ""
},
"xAxis": {
"title": {
"text": ""
},
"categories": [
"A",
"B",
"C"
]
},
"plotOptions": {
"series": {
"stacking": "percent",
"pointPadding": 0.2,
"borderWidth": 0,
"animation": false
}
},
"series": [
{
"name": "Bacon",
"data": [
36.4,
18.9,
17.5
]
},
{
"name": "Pork Chops",
"data": [
105,
93.7,
108.8
]
},
{
"name": "Ham",
"data": [
32.7,
30.7,
34.2
]
}
]
});
I see two solutions for your case:
display button in front of the series: http://jsfiddle.net/uy05zby3/7/
events: {
load: function() {
if(!this.options.chart.forExport) {
this.exportSVGElements[0].toFront();
}
}
}
make space for the button: http://jsfiddle.net/uy05zby3/5/
"chart": {
"type": "bar",
"zoomType": "x",
"marginTop": 30 // make more space on top edge
},
This is happening because of the height value set in the div,
try the following
#container {
min-width: 300px;
max-width: 800px;
min-height: 350px;
margin: 1em auto;
}
fiddle link :)
It provides margin so that no overlay of menu happpens
hope this us helpful
Related
I have some big vertical(Y) axis label names. When they are displayed, they shrink the size of the actual chart and reading them becomes confusing.
Here is the image:
As can be seen in the image, the labels are unaligned. How to make them properly align?
Here are the chart options I am using:
{
"plotOptions": {
"series": {
"pointPadding": 0,
"borderWidth": 0
}
},
"chart": {
"height": "50%"
},
"rangeSelector": {
"selected": 1
},
"title": {
"text": "Index EOD Analysis"
},
"tooltip": {
"split": true
},
"yAxis": [
{
"labels": {
"align": "right",
"x": -3
},
"title": {
"text": "OHLC"
},
"height": "60%"
},
{
"labels": {
"align": "right",
"x": -3
},
"height": "20%",
"top": "60%",
"title": {
"text": "FII Consolidated PCR"
}
},
{
"labels": {
"align": "right",
"x": -3
},
"height": "20%",
"top": "80%",
"title": {
"text": "Net Seller Index"
}
}
],
"series": [
{...}
]
You can increase a width of the labels:
"yAxis": [...,
{
...
"title": {
...,
style: {
width: '200px'
}
}
}
]
Live demo: http://jsfiddle.net/BlackLabel/eb4g6rtc/
API Reference: https://api.highcharts.com/highcharts/yAxis.title.style
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
I'm trying to display a chart as a single, horizontal column with a vertical legend below it. Here's what I have so far:
Highcharts.chart('container', {
"legend": {
"itemMarginBottom": 10
},
"responsive": {
"rules": [
{
"condition": {
"maxWidth": 700
},
"chartOptions": {
"legend": {
"layout": "vertical"
}
}
}
]
},
"chart": {
"type": "bar",
"margin": [
0,
0,
44,
0
]
},
"credits": false,
"plotOptions": {
"bar": {
"dataLabels": {
"enabled": true,
formatter() {
let value = this.y * 100;
return value > 4 ? `${ value.toFixed(1) }%` : null;
},
"overflow": "none"
},
"groupPadding": 0,
"pointPadding": 0
},
"series": {
"animation": false,
"pointPadding": 0,
"pointWidth": 40,
"stacking": "percent",
"events": {},
"marker": {
"states": {
"hover": {
"enabled": false
},
"select": {
"enabled": false
}
}
}
}
},
"series": [
{
"name": "Optimized",
"data": [
0.7455639561796032
],
"zIndex": 0
},
{
"name": "Partially Optimized",
"data": [
0.1260607930874859
],
"zIndex": -1
},
{
"name": "Not Optimized",
"data": [
0.064033328190094
],
"zIndex": -2
},
{
"name": "Plant Off",
"data": [
0.06434192254281708
],
"zIndex": -3
},
{
"name": "Communication Failure",
"data": [
0
],
"zIndex": -4
}
],
"title": false,
"tooltip": false,
"xAxis": {
"labels": false,
"maxPadding": 0,
"minPadding": 0
},
"yAxis": {
"endOnTick": false,
"labels": false,
"maxPadding": 0,
"min": 0,
"minPadding": 0,
"reversedStacks": false,
"title": false
}
});
And this is what it looks like:
The chart is responsive, and I'd really like to avoid setting a hardcoded height for the whole chart. Rather, I'd like for the plot height of the chart to be 40px, and for Highcharts to size the height of the chart to include the remaining room for the chart's legend.
Ideally, it would look like this:
Here's a link to the JSFiddle.
You can change height of xAxis and yAxis to 40px and on each redraw event calculate optimal height for chart (top margin + height of the yAxis + bottom margin). Take a look at the example below.
API Reference:
http://api.highcharts.com/highcharts/chart.events.load
http://api.highcharts.com/highcharts/chart.events.redraw
Example:
http://jsfiddle.net/e6hf0ms3/
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?
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