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.
Related
When using the pointPlacement in highcharts when data is more than 1 it works fine, but when get one data from server all bars compress to one bar.
Sorry my English is bad
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Efficiency Optimization by Branch'
},
xAxis: {
categories: [
'Seattle HQ',
'San Francisco',
'Tokyo'
]
},
yAxis: [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
},
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [183.6],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: [203.6],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}]
});
<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: 360px; height: 400px; margin: 0 auto"></div>
you can try my code here
try the normal code
That is a Highcharts bug reported here: https://github.com/highcharts/highcharts/issues/11800
As a workaround you can set pointRange: 1:
plotOptions: {
column: {
pointRange: 1,
...
}
}
Live demo: http://jsfiddle.net/BlackLabel/Lzx3shrn/
API Reference: https://api.highcharts.com/highcharts/series.column.pointRange
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>
(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.chart('container', {
title: {
//text: 'Solar Employment Growth by Sector, 2010-2016'
text: false
},
subtitle: {
//text: 'Source: thesolarfoundation.com'
text: false
},
yAxis: {
title: {
text: '$'
}
//,categories: [10,20,30,40,50,60,70,80,90,100]
},
xAxis: {
title: {
text: 'Units'
},
categories: [10, 20, 30]
},
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
/*plotOptions: {
series: {
pointStart: 0
}
},*/
series: [{
lineWidth: 0,
showInLegend: false,
cursor: 'pointer',
point: {
events: {
click: function(e) {
hs.close();
hs.htmlExpand(null, {
pageOrigin: {
x: (e.pageX || e.clientX) - 100,
y: (e.pageY || e.clientY) + 60
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
this.y + ' visits',
width: 200
});
}
}
},
states: {
hover: {
lineWidthPlus: 0
}
},
name: 'Installation',
data: [12, 40, 42]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Fiddle
As per requirement, I have implemented highslide popup. But in some cases, the toggle click event is applying to the outside of the marker points also. the highslide popup should toggle when I click on marker points only. can anyone help me out with this issue?
Add chart type scatter by default it is type line. In line chart hover is due to connecting line, which cause pop up to appear.In scatter chart this does not happen
Highcharts.chart('container', {
chart: {
type: "scatter"
},
title: {
//text: 'Solar Employment Growth by Sector, 2010-2016'
text: false
},
subtitle: {
//text: 'Source: thesolarfoundation.com'
text: false
},
yAxis: {
title: {
text: '$'
}
//,categories: [10,20,30,40,50,60,70,80,90,100]
},
xAxis: {
title: {
text: 'Units'
},
categories: [10, 20, 30]
},
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
/*plotOptions: {
series: {
pointStart: 0
}
},*/
series: [{
lineWidth: 0,
showInLegend: false,
cursor: 'pointer',
point: {
events: {
click: function(e) {
hs.close();
hs.htmlExpand(null, {
pageOrigin: {
x: (e.pageX || e.clientX) - 100,
y: (e.pageY || e.clientY) + 60
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
this.y + ' visits',
width: 200
});
}
}
},
states: {
hover: {
lineWidthPlus: 0
}
},
name: 'Installation',
data: [12, 40, 42]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
I have a simple basic barchart which does not render at all in SharePoint 2010 page (displays block white space).
I placed my code within content editor and used javascript files what are imported from High charts library (highcharts.js and exporting.js).
can somebody advise me in fixing the code and what should I do.
Here is the code :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
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: 100,
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]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px;
margin: 0 auto">
</div>
</body>
</html>