Is there a way funnel chart will redraw like pie chart does, when a segment is removed?
Similar to this question redraw pie chart in highchart
http://jsfiddle.net/2Me2z/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
plotOptions: {
pie: {
showInLegend: true
}
},
legend: {
enabled: true
},
series: [{
data: [20, 30, 30, 20]
}]
});
// button handler
$('#button').click(function() {
var series = chart.series[0];
if (series.data.length) {
chart.series[0].data[0].remove();
}
});
});
So click on any slice in legend will cause the chart to redraw and the remaining slices will take up 100%
Wonder if the same thing can be done for a funnel chart
http://jsfiddle.net/YUL5c/2/
$(function () {
var chart;
$(document).ready(function () {
// Build the chart
$('#container').highcharts({
chart: {
type: 'funnel',
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: {
series: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.01]
]
}]
});
});
});
Currently the segment just disaapear. But the chart does not redraw
Unfortunately this animation is not supported, but I advice to post your request on the uservoice website
point.visible flag is ignored in funnel code.
If adding the check back to the drawing logic things just work magically. Even for the animation.
Not sure if it is a bug or ignored by intention
Related
Because some date are overlap, I want to add labelline in each Bubble, How can I do that? Thks
You can add the label option to your series object:
series: [{
type: 'scatter',
symbolSize: function (data) {
...
},
emphasis: {
...
},
label: {
show: true,
position: 'top'
},
itemStyle: {
...
},
...
}]
all the customizations available for this label are here (position, format, etc):
https://echarts.apache.org/en/option.html#series-scatter.label
How do I have insert text within the stacked sections of a highcharts stacked bar graph ( https://www.highcharts.com/demo/bar-stacked ).
My graph will really only have two columns, and they'll have the y-axis reversed and displayed as so: https://jsfiddle.net/ogjz9ra0/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Bananas']
},
colors: ['#1b98ee', '#1366a6'],
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
},
legend: {
reversed: true,
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [4726.78]
}, {
name: 'Brian',
data: [4250.00],
}]
});
What I'd like is to be able to inject text into each of the columns.
https://drive.google.com/file/d/1CDttfeB9mqI5r9voYalsLtEeH0OSs3Ey/view?usp=sharing
I'm still relatively new to HighCharts, so any help would be appreciated.
Thank you all so much again!
I did some googling, and most of the results talk about having the text render inside the bar for non-stacked bar charts. Note that the placing for the problem I'm trying to solve is in the center.
You can use datalabels documentation like this :
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function() {
// console.log(this) // uncomment this line to see all params available
return 'custom text here'
}
}
}
},
Fiddle
I have to construct pie of pie chart, for which have gone through various ways possible. I found Highcharts for data visualization. Here is a feature "drilldown" but I want the two pie charts together connecting through the arcs. To achieve the same have tried Highcharts by construction two pie charts using two tags and using css to connect the arcs but its not achievable. please do help me to create pie of pie charts through any way possible.I have searched D3js, google charts and highcharts but couldn't implement. My code is as follows:
$(function () {
$('#left').highcharts({
title: {
text: 'Pie of Pie charts'
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
innerSize:150,
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
$('#right').highcharts({
title: {
text: 'Pie of Pie charts'
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
innerSize:150,
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 35],
['IE', 26.8],
['Safari', 8.5],
['Opera', 20],
['Others', 80]
]
}]
});
});
I'm creating a pie chart in highcharts.
Does anybody know how to set data labels in two lines?
I'm finding this problem when the data labels are too long.
http://jsfiddle.net/larrytron/fSjnD/
$(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,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
maxStaggerLines:1,
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
},
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox jandler glander gramenauer gramen', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
You can simply set width for dataLabels, see: http://jsfiddle.net/Fusher/fSjnD/1/
style: {
width: '100px'
}
You can simply insert in the data labels:
data: [
['Firefox jandler glander <br><b>gramenauer gramen</b>', 45.0],
Note, for some reason, the second line loses the bold formatting unless you addit back in using tags.
http://jsfiddle.net/ZMLSW/
Odd one. I'm calling my pie chart, and when I do the grey background, data pipe connectors, and hover data with the numbers all show fine on the background. But no pie slices will show.
However, if I print out the chart, it shows the slices after I save the chart and go back to the page. Or, if I inspect element in Chrome, it will show the chart after I resize the inspector window. Almost like it's re-drawing the chart if I take any action, but not drawing it initially.
It works the same way in all browsers. No javascript errors are thrown.
Any ideas?
This is my code:
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'pie1',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'application usage'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +'';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#FFFFFF',
connectorColor: '#FFFFFF',
formatter: function() {
return '<b>'+ this.point.name +'</b><br> '+ this.y +' ('+ Math.round(this.percentage) +'%)';
}
}
}
},
series: [{
type: 'pie',
name: 'percentage of application usage',
data: [{
name: 'Lessons', y: 25}, {name: 'Discussion', y: 65}, {name: 'Tests', y: 85}, {name: 'Dropbox', y: 92}, {name: 'Surveys', y: 105
}]
}]
});
});
</script>
<div id='pie1' class='chart_container'></div>