why click event not working in legend? - javascript

could you please tell me why click event not working in legend.I try to show alert when i click on legend .
here is my code
http://jsfiddle.net/qhq2ctqr/3/
$(function() {
$('#container').highcharts({
chart: {
type: 'pie'
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
legend: {
symbolHeight: 1,
symbolWidth: 1,
symbolRadius: 0,
useHTML: true,
align: 'right',
verticalAlign: 'top',
itemWidth: 100,
layout: 'vertical',
x: 0,
y: 100,
labelFormatter: function() {
return '<div style="padding:5px;width:55px;background-color:' + this.color + '"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>';
}
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
series: {
events: {
legendItemClick: function(event) {
alert('----')
}
},
states: {
hover: {
enabled: false
}
}
},
allowPointSelect: false,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
format: '<b>{point.y}</b>',
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: 0,
endAngle: 270,
center: ['50%', '75%']
}
},
tooltip: {
enabled: false,
shadow: false
},
series: [{
states: {
hover: {
enabled: false
}
},
showInLegend: false,
name: 'election result',
enabled: true,
dataLabels: {
enabled: true
},
data: [
['A', 55],
['B', 65],
],
size: '30%',
innerSize: '70%',
}, {
states: {
hover: {
enabled: false
}
},
name: 'Versions',
data: [
['sdsd', 55],
['sdf', 65],
['sdf', 65],
['sdf', 132],
],
size: '70%',
innerSize: '80%',
}]
});
})
;
I tried this code on fiddle but alert is not display ?
/* $('.test').on('click',function(e){
alert('---');
console.log(e)
console.log($(this))
$('div.test').css('background-color','red')
return false;
}) */

Your PlotOptions should be,
plotOptions: {
series: {
cursor: 'pointer',
events: {
legendItemClick: function(event) {
alert('TEST');
},
click: function(event) {
alert('TEST');
}
}
}
}
DEMO

Related

How to make a square and horizontal lines in highcharts?

Need help with highchartsJs. I need chart like on screenshots. For lines i found this, but not fully what i needed. For square i don't have any ideas. Square is most priority.
Any help will be appreciated. Thanks.
square
horizontal lines
If someone need something like this
https://jsfiddle.net/gdgb941o/20/
chart: {
type: 'column'
},
title: {
text: false
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
tickWidth: 0,
lineWidth: 0,
type: 'category',
gridLineWidth: 0
},
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
labels: {
enabled: false
},
max: 100,
title: {
text: false
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
legend: {
enabled: false
},
plotOptions: {
column: {
borderWidth: 0,
grouping: false
},
series: {
}
},
series: [{
data: [{
borderWidth: 2,
borderColor:'#41bc9b',
color: 'white',
name: 'Yes',
y: 100,
dataLabels: {
formatter: function() {
return "33" + "%"
},
enabled: true,
inside: true,
align: 'center',
color: 'black',
style: {
fontSize: 20,
textOutline: false
}
}
}, {
borderWidth: 2,
borderColor:'#41bc9b',
color: 'white',
name: 'The email did not come',
y: 100,
dataLabels: {
formatter: function() {
return "80" + "%"
},
enabled: true,
inside: true,
align: 'center',
color: 'black',
style: {
fontSize: 20,
textOutline: false
}
}
}, {
borderWidth: 2,
borderColor:'#41bc9b',
color: 'white',
name: 'Error in verification',
y: 100,
dataLabels: {
formatter: function() {
return "55" + "%"
},
enabled: true,
inside: true,
align: 'center',
color: 'black',
style: {
fontSize: 20,
textOutline: false
}
}
},
{
borderWidth: 2,
borderColor:'#41bc9b',
color: 'white',
name: 'No',
y: 100,
dataLabels: {
formatter: function() {
return "20" + "%"
},
enabled: true,
inside: true,
align: 'center',
color: 'black',
style: {
fontSize: 20,
textOutline: false
}
}
}]
}, {
pointPadding: 0.125,
data: [{
color: '#41bc9b',
name: 'Yes',
y: 33
}, {
color: '#41bc9b',
name: 'The email did not come',
y: 80
}, {
color: '#41bc9b',
name: 'Error in verification',
y: 55
},
{
color: '#41bc9b',
name: 'No',
y: 20
}]
}]

how to remove shadow on hover in highchart?

could you please tell me how to remove shadow on hover in highchart ? When I hover the any slice it give shadow .
here is my code
http://jsfiddle.net/oupmgvjy/11/
$(function() {
$('#container').highcharts({
chart: {
type: 'pie'
},
credits: {
enabled: false
},
exporting: { enabled: false },
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100
},
title: {
text: 'Election'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
series: {
states: {
hover: {
enabled: false
}
}
},
allowPointSelect: false,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
format: '<b>{point.y}</b>',
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: 0,
endAngle: 270,
center: ['50%', '75%']
}
},
tooltip: {
enabled: false,
shadow: false
},
series: [{
showInLegend: false,
name: 'election result',
enabled: true,
dataLabels: {
enabled: false
},
data: [
['A', 55],
['B', 65],
],
size: '30%',
innerSize: '70%',
}, {
name: 'Versions',
data: [
['a', 55],
['b', 65],
['c', 65],
['d', 132],
],
size: '70%',
innerSize: '80%',
}]
});
});
in other words I need to remove shadow on hover .I already use shadow: false
What you want is achieved throug plotOptions -> series -> states -> hover. You just have to add the next option inside plotOption:
series: {states: {hover: {enabled: false}}},
Here you have the documentation.
Please, if this answer your question, mark it as solved :)

How to make rectangular legend in highcharts?

Could you please tell me how to make rectangular legend in highcharts?
Currently in my demo legend is circular or circle. Here is my code
http://jsfiddle.net/oupmgvjy/12/
I want to make like this as show in image:
$(function() {
$('#container').highcharts({
chart: {
type: 'pie'
},
credits: {
enabled: false
},
exporting: { enabled: false },
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100,
labelFormatter: function() {
return '<span style="color:' + this.color + ';background:red!important">' + this.name + ':</span> <b>' + this.y + '</b> </n>';
}
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
series: {
states: {
hover: {
enabled: false
}
}
},
allowPointSelect: false,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
format: '<b>{point.y}</b>',
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: 0,
endAngle: 270,
center: ['50%', '75%']
}
},
tooltip: {
enabled: false,
shadow: false
},
series: [{
states: {hover: {enabled: false}},
showInLegend: false,
name: 'election result',
enabled: true,
dataLabels: {
enabled: true
},
data: [
['A', 55],
['B', 65],
],
size: '30%',
innerSize: '70%',
}, {
states: {hover: {enabled: false}},
name: 'Versions',
data: [
['sdsd', 55],
['sdf', 65],
['sdf', 65],
['sdf', 132],
],
size: '70%',
innerSize: '80%',
}]
});
});
Try with useHTML and labelFormatter
legend: {
symbolHeight: 1,
symbolWidth: 1,
symbolRadius: 0,
useHTML:true,
align: 'right',
verticalAlign: 'top',
itemWidth:100,
layout: 'vertical',
x: 0,
y: 100,
labelFormatter: function() {
return '<div style="padding:10px;width:55px;background-color:'+this.color+'"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>';
}
}
fiddle : http://jsfiddle.net/qhq2ctqr/
$(function() {
$('#container').highcharts({
chart: {
type: 'pie'
},
credits: {
enabled: false
},
exporting: { enabled: false },
legend: {
symbolHeight: 1,
symbolWidth: 1,
symbolRadius: 0,
useHTML:true,
align: 'right',
verticalAlign: 'top',
itemWidth:100,
layout: 'vertical',
x: 0,
y: 100,
labelFormatter: function() {
return '<div style="padding:10px;width:55px;background-color:'+this.color+'"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>';
}
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
series: {
states: {
hover: {
enabled: false
}
}
},
allowPointSelect: false,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
format: '<b>{point.y}</b>',
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: 0,
endAngle: 270,
center: ['50%', '75%']
}
},
tooltip: {
enabled: false,
shadow: false
},
series: [{
states: {hover: {enabled: false}},
showInLegend: false,
name: 'election result',
enabled: true,
dataLabels: {
enabled: true
},
data: [
['A', 55],
['B', 65],
],
size: '30%',
innerSize: '70%',
}, {
states: {hover: {enabled: false}},
name: 'Versions',
data: [
['sdsd', 55],
['sdf', 65],
['sdf', 65],
['sdf', 132],
],
size: '70%',
innerSize: '80%',
}]
});
});
<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: 0px auto"></div>

how to show text in center in highcharts?

Could you please tell me how to show text in center in highcharts .I want to show A/B value in center of both donut chart .I want to show
value of donut chart 155/165 value in center here is my code
http://jsfiddle.net/oupmgvjy/12/
expected output
A/B value in center
$(function() {
$('#container').highcharts({
chart: {
type: 'pie'
},
credits: {
enabled: false
},
exporting: { enabled: false },
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100,
labelFormatter: function() {
return '<span style="color:' + this.color + ';background:red!important">' + this.name + ':</span> <b>' + this.y + '</b> </n>';
}
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
series: {
states: {
hover: {
enabled: false
}
}
},
allowPointSelect: false,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
format: '<b>{point.y}</b>',
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: 0,
endAngle: 270,
center: ['50%', '75%']
}
},
tooltip: {
enabled: false,
shadow: false
},
series: [{
states: {hover: {enabled: false}},
showInLegend: false,
name: 'election result',
enabled: true,
dataLabels: {
enabled: true
},
data: [
['A', 155],
['B', 165],
],
size: '30%',
innerSize: '70%',
}, {
states: {hover: {enabled: false}},
name: 'Versions',
data: [
['sdsd', 55],
['sdf', 65],
['sdf', 65],
['sdf', 132],
],
size: '70%',
innerSize: '80%',
}]
});
});
You can use dataLabels.distance property to set the labels inside the pie.
dataLabels: {
enabled: true,
distance: -40
},
example: http://jsfiddle.net/oupmgvjy/13/

How can I remove the white border from HighCharts pie chart?

I am using High-charts to show pie charts, can any one tell me how can I remove this white border around the radius. My code is given below also the screen shot image of chart.
I have no lot of experience with high-charts if anyone know this please help me. The documentation is also very tough to read and understand
$(function () {
$('#cashflow_graph').highcharts({
chart: {
type: 'pie',
backgroundColor:'red',
},
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
shadow: false,
center: ['50%', '50%']
},
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
},
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
valueSuffix: '%'
},
series: [{
name: 'Cash Flow',
data: [
{
name: 'Incoming',
y: 40,
color: '#87b22e'
},
{
name: 'Outgoing',
y: 30,
color: 'black'
},
{
name: '',
y: 30,
color: 'white'
}
],
size: '80%',
innerSize: '80%',
dataLabels: {
enabled: false,
formatter: function () {
return false;
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>
<div id="cashflow_graph" style="height: 300px; width:100%;"></div>
You need to set the plotOptions.pie.borderWidth property to 0:
$(function() {
$('#cashflow_graph').highcharts({
chart: {
type: 'pie',
backgroundColor: 'red',
},
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
shadow: false,
center: ['50%', '50%'],
borderWidth: 0 // < set this option
},
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
},
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
valueSuffix: '%'
},
series: [{
name: 'Cash Flow',
data: [{
name: 'Incoming',
y: 40,
color: '#87b22e'
}, {
name: 'Outgoing',
y: 30,
color: 'black'
}, {
name: '',
y: 30,
color: 'white'
}
],
size: '80%',
innerSize: '80%',
dataLabels: {
enabled: false,
formatter: function() {
return false;
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>
<div id="cashflow_graph" style="height: 300px; width:100%;"></div>

Categories

Resources