I have a simple highcharts which contains a custom button,but here I need to initialize that button from out of highcharts,so that whenever I click on it,it should not hide,only chart should hide. Below is my code ,can anyone please help me on it.I have updated the code in this plunker
http://plnkr.co/edit/YSLQMoQpKZqFPk0PXhXm?p=preview
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.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"></div>
javascript
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
},
exporting: {
buttons: {
'myButton': {
text: 'Custom Button',
onclick: function () {
alert('You pressed the button!');
},
theme: {
class: "myButton highcharts-button highcharts-button-normal",
id: "myDiamondButton"
},
onclick: function () {
alert('You pressed the button!');
}
}
}
}
});
$("#myDiamondButton").click(function(){
$('#container').hide();
});
To accomplish, create the button you wish to stay on the page as a separate element outside the scope of the chart. Remove the 'exporting' option from the chart and then create a new HTML element for the button.
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
$("#myDiamondButton").click(function(){
$('#container').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<button id="myDiamondButton" >Custom Button</button>
<div id="container"></div>
<script src="script.js"></script>
Related
I want to convert my ejs data into json data so that it will be easier for me to take that data and use it to make a live highchart.I want to make my data similar to this: http://jsfiddle.net/jugal/j4ZYB/. But so far I have not been able to achieve it. I am new to hichcharts and nodejs. Any help is appreciated.
My code is
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<link rel="stylesheet" type="text/css" href="/public/oi chart.css">
</head>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<script type="text/javascript">
Highcharts.stockChart('container', {
chart: {
height: (1 / 2 * 100) + '%' // 1:2 ratio
},
rangeSelector: {
enabled: true,
selected: customRange,
buttons: [{
type: 'day',
count: 1,
text: '1D'
}, {
type: 'week',
count: 1,
text: '1W'
}, {
type: 'week',
count: 2,
text: '2W'
}, {
type: 'month',
count: 1,
text: '1M'
}, {
type: 'all',
text: 'All'
}]
},
time: {
timezoneOffset: timezone
},
title: {
text: chartTitle,
},
subtitle: {
text: subTitle,
},
yAxis: {
offset: 60,
title: {
text: 'Open Interest'
},
resize: {
enabled: true
}
},
xAxis: {
type: 'datetime'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
marker: {
enabled: false
},
label: {
connectorAllowed: false
},
}
},
series: [{
name: 'Expected',
data: [<% for(var i=0; i < expected_data.length; i++) { %> [<%= expected_data[i] %>], <% } %>].sort()
}, {
name: 'Actual',
data: [<% for(var i=0; i < actual_data.length; i++) { %> [<%= actual_data[i] %>], <% } %>].sort()
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>
</html>
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 want to create a dynamic chart that shows all bars in the same color except for the person, who looks at it (in this case: The person who is represented by Afrika, Amerika, etc. Do you have any idea how to do it (in an easy way)?
Thanks in advance!
Highcharts code from https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bar-basic/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}]
});
You can simply set color for the point in data:
Highcharts.chart('container', {
series: [{
type: 'bar',
data: [43934, {
y: 52503,
color: 'red'
}, 57177, 69658, 97031, 119931, 137133, 154175]
}]
});
If you want to change the color depending on some condition, you can use update method for point, for example in load event:
chart: {
events: {
load: function() {
Highcharts.each(this.series[0].points, function(p) {
if (p.y > 8) {
p.update({
color: 'red'
});
}
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/4ucx3skh/
API: https://api.highcharts.com/class-reference/Highcharts.Point#update
I have a Highcharts pie chart on my page, working fine.
What I would like to do is remove the values displayed on mouseover of the pie and instead display the values statically with dataLabels(?).
I am not that good at JS and have no idea where to start.
See image below for explanation.
$(function() {
$('#total').highcharts({
credits: {
enabled: false
},
data: {
table: document.getElementById('datatable_total'),
switchRowsAndColumns: true,
endRow: 1
},
chart: {
type: 'pie'
},
title: {
text: ''
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.point.y + ' ' + this.point.name.toLowerCase();
}
},
navigation: {
buttonOptions: {
verticalAlign: 'bottom',
y: -20
}
}
});
});
$(function () {
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: {point.y}'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> <br>{point.y}</br>',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
colorByPoint: true,
data: [{
name: 'Europe',
y: 50
}, {
name: 'Africa',
y: 25
}, {
name: 'Australia',
y: 18
}, {
name: 'US',
y: 7
}]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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; height: 400px; max-width: 600px; margin: 0 auto"></div>
I am using the following code, it renders perfectly in Safari but not in Chrome. I am seeing no errors in the console in Chrome.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!--http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/ -->
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(document).ready(function () {
console.log('inside function');
$('#container').highcharts({
title: {
text: 'Monthly Active Users',
x: -20 //center
},
subtitle: {
text: 'Users who visited on more than 2 days in the last 30 days',
x: -20
},
xAxis: {
categories: ["11/09/2016","12/09/2016","13/09/2016","14/09/2016","15/09/2016","16/09/2016","17/09/2016","18/09/2016","19/09/2016","20/09/2016","21/09/2016","22/09/2016",] //insert date here
},
yAxis: {
title: {
text: 'Percent (%)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '%'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Monthly Active Users',
data: [
4.2359074617139,4.3266102797658,4.3492372606297,4.3000323310702,4.297253634895,4.1612903225806,4.1867954911433,4.3338683788122,4.3089690392595,4.3795620437956,4.3037974683544,4.294284812125,]
}]
});
});
</script>
Here's a perfectly fine working snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!--http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/ -->
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(document).ready(function () {
console.log('inside function');
$('#container').highcharts({
title: {
text: 'Monthly Active Users',
x: -20 //center
},
subtitle: {
text: 'Users who visited on more than 2 days in the last 30 days',
x: -20
},
xAxis: {
categories: ["11/09/2016","12/09/2016","13/09/2016","14/09/2016","15/09/2016","16/09/2016","17/09/2016","18/09/2016","19/09/2016","20/09/2016","21/09/2016","22/09/2016",] //insert date here
},
yAxis: {
title: {
text: 'Percent (%)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '%'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Monthly Active Users',
data: [
4.2359074617139,4.3266102797658,4.3492372606297,4.3000323310702,4.297253634895,4.1612903225806,4.1867954911433,4.3338683788122,4.3089690392595,4.3795620437956,4.3037974683544,4.294284812125,]
}]
});
});
</script>
with your code that works on Chrome. Could you maybe provide more details about how you're running this and if there are any warnings in the console (not errors)
I have just run the code in chrome and it renders just fine. I am using chrome version Version 52.0.2743.116 m.