remove extra space/margin after navigator highstocks - javascript

I am using highstocks in my application where I have following options of highstock chart.
rangeSelector: {
enabled: false
},
scrollbar: {
enabled: false
},
title: {
text: 'Dummy Data Set'
},
credits: {
enabled: false
},
series: [{
tooltip: {
valueDecimals: 2
},
name: 'AAPL',
data: [
...
]
}]
HTML template is like this
<div style="border: 1px black solid" class='container'></div>
I am getting an ohlc stock chart but have extra space/margin at the bottom after navigator.
Is there any way to remove that extra space/margin.

You can control the space between the bottom edge of the chart and the content by setting appropriate chart.spacingBottom value.
Code:
Highcharts.stockChart('container', {
chart: {
spacingBottom: 5
},
credits: {
enabled: false
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
name: 'AAPL',
data: [
[1539264600000, 214.45],
[1539351000000, 222.11],
[1539610200000, 217.36],
[1539696600000, 222.15],
[1539783000000, 221.19],
[1539869400000, 216.02],
[1539955800000, 219.31],
[1540215000000, 220.65],
[1540301400000, 222.73],
[1540387800000, 215.09],
[1540474200000, 219.8],
[1540560600000, 216.3],
[1540819800000, 212.24],
[1540906200000, 213.3],
[1540992600000, 218.86],
[1541079000000, 222.22],
[1541165400000, 207.48],
[1541428200000, 201.59],
[1541514600000, 203.77],
[1541601000000, 209.95],
[1541687400000, 208.49],
[1541773800000, 204.47],
[1542033000000, 194.17],
[1542119400000, 192.23],
[1542205800000, 186.8]
],
tooltip: {
valueDecimals: 2
}
}]
});
#container {
border: 1px solid red;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
Demo:
https://jsfiddle.net/BlackLabel/krgxL7dv/1/
API reference:
https://api.highcharts.com/highstock/chart.spacingBottom

Related

View Data table in highcharts

how can i toggle the data table in high-charts from another button not from the exporting options in high-charts , when i click it once it should show the data table below the chart again i clicked on that it should hide the data-table, and i have the N number of graphs so it should be dynamic for all the charts
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<button onclick="toggleDataTable()">
Toggle Datatable
</button>
<script>
function toggleDataTable(){
var chart= $('#container').highcharts()
chart.update({
exporting: {
showTable: true
}
});
}
Highcharts.chart('container', {
exporting:false,
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Other',
y: 7.05
}]
}]
});
</script>
for the reference please go through this link:
https://jsfiddle.net/GnanaSagar/roL5mhu1/6/
First, showTable is an attribute from the exporting options. You cannot set exporting: false then. You must set it like this if you don't want to see the exporting button on top right:
exporting: {
enabled: false
},
Then for the onclick function, you should probably use something like:
function toggleDataTable() {
var chart = $('#container').highcharts()
chart.update({
exporting: {
showTable: !chart.options.exporting.showTable
}
});
}
But it does not remove the table after clicking back.
So I suggest you manually remove the table element when chart.options.exporting.showTable is going from true to false:
if (chart.options.exporting.showTable) {
var element = document.getElementById("highcharts-data-table-0");
element.parentNode.removeChild(element);
}
See updated jsfiddle here.

Controlling columns with legends of simple series column chart of Highcharts

(Might be a possible duplicate of How to create a single series bar graph with Highcharts)
I'm trying to create a simple Highcharts column chart with a single series and multiple labels in the legend as shown below
By toggling the legend( Series 1 ) it shows and hides both column charts.I need to control the individual column with the legends (which should be labelled Jan and Feb )
The code snippet for reference -
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb' ]
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [
{
data: [
{y: 6, name: 'First', color: 'blue'},
{y: 6, name: 'sec', color: 'red'}
]
}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Highcharts bar format datalabels to percent and add text

I have highcharts bar.
How I can format my datalabel to percent and add text datalabels (how i can reposition this text? It's need me for create vertical version of this bar) ?
In the end, it should turn out like this in a horizontal or vertical solution.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Activity'
},
xAxis: {
categories: ['Activity']
},
yAxis: {
min: 0,
title: {
text: ''
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
borderWidth: 0,
stacking: 'normal',
pointWidth: 3,
dataLabels: {
enabled: true,
y: 2,
verticalAlign: 'top',
align: 'left',
color: '#000000',
style: {
textOutline: false
}
}
}
},
series: [{
name: 'One',
data: [10],
color: '#f45b69'
}, {
name: 'Two',
data: [20],
color: '#44bba4'
}, {
name: 'Three',
data: [30],
color: '#ff9f1c'
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
To just show the number with a percentage sign behind as well as the series name you can set the dataLabels format like this:
plotOptions: {
series: {
format: '{y} % <br/> {series.name}',
...
}
}
If you want to change how it looks or have more customize-ability you can use formatter instead of format.
Working example: https://jsfiddle.net/ewolden/y5ygdx2a/1/
API on dataLabels.format: https://api.highcharts.com/highcharts/plotOptions.series.dataLabels.format

How can I change the text of the back button on this dropdown pie chart?

When you click on the 'Recycled Materials' section of the pie chart it drops down into more info about that section.
The problem is the back button has the default text 'Back to Brands' in it and I can't find anywhere in my code to change that.
My code is as follows:
Java:
$(function () {
// Create the chart
$('#container').highcharts({
credits: {
enabled: false
},
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Green Up Amount Recycled'
},
subtitle: {
text: 'Click the Recycled Materials slice for more information.'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "Landfill - 45,821 lbs",
y: 23.73,
}, {
name: "Recycled Materials - 147,276 lbs",
y: 76.27,
drilldown: "Recycled Materials"
}]
}],
drilldown: {
series: [{
name: "Recycled Materials",
id: "Recycled Materials",
data: [
["Tent Frames and Chairs - 6,400 lbs", 4.35],
["Aluminum Cans - 28,950 lbs", 19.66],
["Plastic PET Bottles - 36,420 lbs", 24.73],
["Glass - 40,950 lbs", 27.8],
["Cardboard - 30,000 lbs", 20.37],
["Solo Cups - 4,556 lbs", 3.09],
]
}]
}
});
});
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 500px; max-width: 500px; height: 400px; margin: 0 auto"></div>
Thanks for the help!
Simply change
name: "Brands"
to whatever you have, maybe "Materials", example

Highmaps occuring 'Uncaught TypeError: undefined is not a function ' and not loading?

I am trying use Highmaps with Highchart.Highcharts working perfectly but highmaps doesnt work with highmaps.
Highmaps not loading with highchart graphic.And thoring 'Uncaught TypeError: undefined is not a function ' error on console.I assume that its javascript confilict error.But How can I fix this?
Code:
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
<script>
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population.json&callback=?', function (data) {
var mapData = Highcharts.geojson(Highcharts.maps['custom/world']);
// Correct UK to GB in data
$.each(data, function () {
if (this.code === 'UK') {
this.code = 'GB';
}
});
$('#container').highcharts('Map', {
chart : {
borderWidth : 1
},
title: {
text: 'World population 2010 by country'
},
subtitle : {
text : 'Demo of Highcharts map with bubbles'
},
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series : [{
name: 'Countries',
mapData: mapData,
color: '#E0E0E0',
enableMouseTracking: false
}, {
type: 'mapbubble',
mapData: mapData,
name: 'Population 2010',
joinBy: ['iso-a2', 'code'],
data: data,
minSize: 4,
maxSize: '12%',
tooltip: {
pointFormat: '{point.code}: {point.z} thousands'
}
}]
});
});
});
</script>
Thanks for helps.
You need to add jquery.min.js before other highmaps plugin
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population.json&callback=?', function (data) {
var mapData = Highcharts.geojson(Highcharts.maps['custom/world']);
// Correct UK to GB in data
$.each(data, function () {
if (this.code === 'UK') {
this.code = 'GB';
}
});
$('#container').highcharts('Map', {
chart : {
borderWidth : 1
},
title: {
text: 'World population 2010 by country'
},
subtitle : {
text : 'Demo of Highcharts map with bubbles'
},
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series : [{
name: 'Countries',
mapData: mapData,
color: '#E0E0E0',
enableMouseTracking: false
}, {
type: 'mapbubble',
mapData: mapData,
name: 'Population 2010',
joinBy: ['iso-a2', 'code'],
data: data,
minSize: 4,
maxSize: '12%',
tooltip: {
pointFormat: '{point.code}: {point.z} thousands'
}
}]
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

Categories