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.
Related
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
Currently i am facing a problem that i need to set Opacity manualy on pie-chart using Highchart. The following solution works fine if you know what color you wish to assign to the slice. But if the color is picked from a palette which is generic, there is no way to give the opacity. It always takes 0. For Can anyone help me with this.
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
fillOpacity: 0.5,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true,
color: 'rgba(150,100,50,0.1)'
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
You can set opacity by using attr method:
events: {
load: function() {
var points = this.series[0].points;
points[1].graphic.attr({
opacity: 0.4
})
}
}
Live demo: http://jsfiddle.net/BlackLabel/59mye8kn/
API: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
I have the following code for my legend, and a responsive rule to remove the legend for mobile.
The problem I'm seeing right now, is that the legend will always load with the chart initially. The responsive rule only seems to apply later (i.e. if I reload the page, the legend is there, if I click a link to another page, and then return, the legend is gone).
Is there a way to force the responsive check on load?
legend: {
enabled: true,
verticalAlign: 'top',
align: 'right',
floating: true,
margin: 0,
padding: 0,
x: showConviction ? -50 : -46,
y: 10
},
responsive: {
rules: [
{
condition: {
maxWidth: 400
},
chartOptions: {
legend: {
enabled: false
}
}
}
]
},
You can check chartWidth when load event occurs and disable legend then.
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
JS:
Highcharts.chart('container', {
chart: {
events: {
load: function() {
var chart = this,
legend = chart.legend,
chartWidth = chart.chartWidth;
if (chartWidth < 400) {
legend.update({
enabled: false
});
}
}
}
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}],
responsive: {
rules: [{
condition: {
maxWidth: 400
},
chartOptions: {
legend: {
enabled: false
}
}
}]
}
});
Demo:
https://jsfiddle.net/BlackLabel/t1dswx4j/
I am able to get high chart working by passing series data. This assigns random or theme color for the high chart.
In following example, I am able to see lightblue, black and green. But How do I set predefined colors. For example, I want to use Orange,Red and yellow instead.
// Build the chart
Highcharts.chart('container', {
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
}]
}]
});
<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>
You can use setOptions for color in Highcharts like below.
Highcharts.setOptions({
colors: ['#ff6600', '#ff0000', '#ffff00']
});
// Build the chart
Highcharts.chart('container', {
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
}]
}]
});
<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>
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