Pls find the link for treemap http://jsfiddle.net/BlackLabel/m0587v4q/.
What I need is when I double click on legend it should show that respective data only on tree map and rest should hide.
$('#container').highcharts({
'chart': {
type: 'treemap'
},
series: [{
data: [{
'name': 'Americas',
'value': 52976,
'color': 'rgba(47,126,216,1)'
}, {
'name': 'Australia',
'value': 41219,
'color': 'rgba(13,35,58,1)'
}, {
'name': 'Europe',
'value': 62756,
'color': 'rgba(139,188,33,1)'
}, {
'name': 'Asia',
'value': 14577,
'color': 'rgba(145,0,0,1)'
}],
legendType: 'point',
showInLegend: true
}]
});
You can use Custom-Events plugin and add double click event in this way:
legend: {
itemEvents: {
dblclick: function() {
console.log('dblclick')
},
click: function() {
console.log('click')
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4952/
Docs: https://www.highcharts.com/plugin-registry/single/15/Custom-Events
Related
In a Highcharts line chart, I need to put the series name on the right of the last point of each one.
Unfortunately, even if I set chart.spacingRight and chart.marginRight, the space on the right is not used.
Is there any solution/workaround?
Jsfiddle
Highcharts.chart('container', {
chart: {
spacingRight: 200
},
plotOptions: {
series: {
label: {
enabled:false
},
pointStart: 2010,
dataLabels: {
enabled:true,
align:'left',
verticalAlign:'middle',
x:10,
formatter: function() {
return this.series.data.indexOf( this.point ) == this.series.data.length - 1 ? this.series.name : '';
}
}
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
});
You can do that with dataLabels.crop:false and dataLabels.overflow: 'allow'
dataLabels: {
overflow: 'allow',
crop:false,
...
Api documentation currently broken, so impossible to put the real link
Fiddle
I would like to link a pair of areas to a legend in highcharts treemap so that clicking on the legend turns both the area on/off.
For example, in this fiddle, if I click 'America' in the legend I would like it to turn off both the areas covering 'America' & similarly to do with 'Australia'.
Fiddle here.
$(function() {
var H = Highcharts;
H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
e.allItems.splice(1, 2);
});
$('#container').highcharts({
chart: {
type: 'treemap'
},
plotOptions: {
series: {
events: {
legendItemClick: function (event) {
alert('Done');
}
}
}
},
series: [{
data: [{
'name': 'Americas',
'value': 52976,
'color': 'rgba(47,126,216,1)'
}, {
'name': 'Australia',
'value': 41219,
'color': 'rgba(13,35,58,1)'
}, {
'name': 'Americas',
'value': 52976,
'color': 'rgba(47,126,216,1)'
}, {
'name': 'Australia',
'value': 41219,
'color': 'rgba(13,35,58,1)'
}],
legendType: 'point',
showInLegend: true
}]
});
});
You can use point legendItemClick event and internal setVisible method:
plotOptions: {
series: {
point: {
events: {
legendItemClick: function(event) {
var points = this.series.points;
points.forEach(function(p) {
if (this !== p && this.name === p.name) {
p.setVisible(!this.visible, true);
}
}, this);
}
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/k4o8q6du/
I make a funnel with this script
$(function () {
$('#container').highcharts({
chart: {
type: 'funnel',
marginRight: 100
},
title: {
text: 'Sales funnel',
x: -50
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
softConnector: false
},
neckWidth: '2%',
neckHeight: '0%',
//-- Other available options
//height: pixels or percent
width: '100%'
}
},
legend: {
enabled: false
},
series: [{
name: 'Unique users',
data: [
['Item 1', 15005],
['Item 2', 1681],
['Item 3', 1254],
['Item 4', 1165],
['Item 5', 800],
['Item 6', 60],
['Item 7', 202],
]
}]
});
});
http://jsfiddle.net/fainz777/j7p76n6r/1/
If it possible to make it to this view http://c2n.me/38zvhae ?
Each bar have equal height and only width depends on value.
Thanks for help.
There is no function in Highcharts API to make that chart. Funnel type chart has only one change in width from tapered to straight.
Instead you can try to use area range type chart.
JSFiddle: http://jsfiddle.net/rb4j0unv/
$(function () {
$('#container').highcharts({
chart: {
type: 'arearange',
inverted: true,
zoomType: 'x'
},
legend: {
enabled: false
},
series: [{
data: [{low:-100, high:100, x: 0},{low:-50, high:50, x: 1}]
},{
data: [{low:-50, high:50, x: 1},{low:-40, high:40, x: 3}]
},{
data: [{low:-40, high:40, x: 3},{low:0, high:0, x: 4}]
}]
});
});
I was wondering if anyone was able to create a bar chart with labels like the pie chart? I need to be able to create the labels outside and create that line to them. Just like the pie chart does here:
http://www.highcharts.com/demo/pie-basic
I have a basic bar chart (using it as a progress bar). I need to create the labels on the outside because the sections might get really small. Here is my JSFiddle: http://jsfiddle.net/rLYj4/5
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: '<b>Total</b><br/><b>$100.00</b>'
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
gridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
startOnTick: false
},
yAxis: {
minorGridLineWidth: 0,
gridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
title: {
text: ''
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'white'
}
}
},
series: [{
name: 'Category 1',
data: [50.00]
}, {
name: 'Category 2',
data: [25.00]
}, {
name: 'Category 3',
data: [12.50]
}, {
name: 'Category 4',
data: [12.50]
}]
});
});
Does anyone know how to accomplish this?
Thanks,
Joshua
Unfortuantely this option is not supported, but you can post your suggestion on the website: http://highcharts.uservoice.com/forums/55896-general
Below is the code fiddle to display highchart. It doesn't show datalabels when chart type is column. when it is 'bar' it shows datalabels.
http://jsfiddle.net/LuxRK/embedded/result/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Nominated', 'Approved','Rejected', 'Pending']
},
yAxis: {
labels:
{
enabled:false
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Employment',
data: [107, 31, 635, 203]
}, {
name: 'Internship',
data: [973, 914, 4054, 732]
}]
});
});
Is there anything which I am missing?
yes when you change the type from 'bar' to 'column', the same has to be done in plotOptions also change 'bar' to 'column' as shown below
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Nominated', 'Approved','Rejected', 'Pending']
},
yAxis: {
labels:
{
enabled:false
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Employment',
data: [107, 31, 635, 203]
}, {
name: 'Internship',
data: [973, 914, 4054, 732]
}]
});
});
updated your fiddle at http://jsfiddle.net/LuxRK/1/