Highcharts pie chart - offset a single slice on legend click answers the question asked in the Title but I have an issue with that. When you click on one legend, corresponding slice pops out and when you click the second, it also explodes along with the first one.
What I want to do here is that only the clicked slice is exploded and all other slices go back to their original positions so there could only be one selected slice at a time.
Any help in this regard will be greatly appreciated as I am not very familiar with highchart events..
$(function () {
$(document).ready(function () {
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
point: {
events: {
legendItemClick: function () {
this.slice();
/*Something should happen here to move all other slices back*/
return false;
}
}
}
}
},
series: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "Microsoft Internet Explorer",
y: 56.33
}, {
name: "Chrome",
y: 24.03,
sliced: true,
selected: true
}, {
name: "Firefox",
y: 10.38
}, {
name: "Safari",
y: 4.77
}, {
name: "Opera",
y: 0.91
}, {
name: "Proprietary or Undetectable",
y: 0.2
}]
}]
});
});
});
JSFiddle Link
I have set a check if legend is clicked other pie slice shouldn't be sliced.
See Updated fiddle here
point: {
events: {
legendItemClick: function () {
this.slice();
var chart = $('#container').highcharts();
var legend = chart.legend;
for (var i in legend.allItems) {
var item = legend.allItems[i];
if(item !=this)
item.slice(false);
}
return false;
}
}
}
Related
I have a couple of questions while dealing with Pie Charts in High charts.
How to change the legend's shape apart from the circle.
I want to display legends in data labels prior to percentage values.
And also with an increase in data, data labels are not radical to the pie chart. How to fix this.
my chart options :
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.percentage:.1f} %'
},
showInLegend: true
},
},
series: [{
name: 'Brands',
colorByPoint: true,
dataLabels: {
connectorWidth : 0
},
showLegends: true,
data: [{
name: 'Chrome',
y: 61.41,
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}]
}]
});
my code pen
Would be grateful if I get an answer to any of my questions.
The API allows customizing the legend symbol by setting options like symbolRadius or symbolHeight.
Demo: https://jsfiddle.net/BlackLabel/1m98xgvr/
API: https://api.highcharts.com/highcharts/legend.symbolHeight
If you want to change the legend symbol to the custom png try to use this solution:
Custom Highcharts legend symbol
You can set the dataLabels.useHTML flag to true and use the dataLabes.formatter callback to customize the output which will be an outstanding HTML element.
Demo: https://jsfiddle.net/BlackLabel/2sog3znq/
Here I am not sure what do you have in mind - could you explain it more precisely?
I want to merge two arrays and display them on chart but can't do it. Please show the correct syntax of drawing that type of chart. If someobdy could provide a jsfiddle link it would be better for my understanding. Thanks.
$(function () {
var name = ['chrome','firefox','opera'];
var data = [11.22,81.54,6];
var final = [name,data];
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: "Results",
colorByPoint: true,
data:JSON.parse(final)
}]
});
});
You don`t have to merge arrays. You have to build new array with list of objects. Those objects should have structure based on arrays that you provided. Propriety "name", of each object, should get its value form the "name" array. Propriety 'y', in its turn should get value from the "data" array. Something like:
var final = [
{
name: 'chrome',
y: '11,22'
},
{
name: 'firefox',
y: '81.5'
},
{
name: 'opera',
y: '6'
}
]
That is how you can get it:
var name = ['chrome','firefox','opera'];
var data = [11.22,81.54,6];
var final = [];
for(var i=0; i < name.length; i++) {
final.push({
name: name[i],
y: data[i]
});
}
Here is the fiddle: http://jsfiddle.net/ujahc83h/2/
I´ve a chart using highcharts, the only problem is that each column has the same column.
What should I do so each column has a different column.
Here is my code:
var charts = [];
$containers = $('#container1');
var datasets = [
{
name: 'Tokyo',
data: [49, 57]
}];
var cat = ['A', 'B'];
console.log(datasets);
$.each(datasets, function(i, dataset) {
console.log(dataset);
charts.push(new Highcharts.Chart({
chart: {
renderTo: $containers[i],
type: 'column',
marginLeft: i === 0 ? 100 : 10
},
title: {
text: dataset.name,
align: 'left',
x: i === 0 ? 90 : 0
},
credits: {
enabled: false
},
xAxis: {
categories: cat,
labels: {
enabled: i === 0
}
},
yAxis: {
allowDecimals: false,
title: {
text: null
}
},
legend: {
enabled: false
},
series: [dataset]
}));
});
Thanks in advance.
To have each column be a different color, all you have to do is set the colorByPoint property to true.
Reference:
http://api.highcharts.com/highcharts#plotOptions.column.colorByPoint
Alternatively you can make each column a separate series, which gives you additional levels of control.
OTOH, in the majority of cases, having each column a separate color serves no purpose except to clutter and confuse the data, and make the user work harder cognitively to interpret the chart.
If you want to highlight a single column for a particular reason, you can do that by adding the fillColor property to the data array:
Something like:
data:[2,4,5,{y:9,fillColor:'rgba(204,0,0,.75)',note:'Wow, look at this one'},4,5,6]
I finally found a way to show more than 1 color for each column:
var charts1 = [];
var $containers1 = $('#container1');
var datasets1 = [{
name: 'Dalias',
data: [29]
},
{
name: 'Lilas',
data: [1]
},
{
name: 'Tulipanes',
data: [15]
}];
$('#container1').highcharts({
chart: {
type: 'column',
backgroundColor: 'transparent'
},
title: {
text: 'Montos pedidos por división'
},
tooltip: {
pointFormat: '<span style="color:{series.color};" />{series.name} </span>:<b>{point.y}</b>',
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
},
series : {
cursor: 'pointer',
point: {
events: {
/*click: function() {
verDetalle("Especialidades,"+ this.series.name);
}*/
}
}
}
},
credits:{
enabled: false
},
yAxis: {
min: 0,
title: {
text: ''
}
},
xAxis: {
categories: ['División']
},
series: datasets1
});
I am trying to prepare a Tornado Chart using the column chart in Highcharts. Here is my fiddle.
My current code is:
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Net Sales'
},
subtitle: {
text: 'MM $'
},
xAxis: {
categories: ['Annual Revenue', 'Number of Years', 'Annual Costs']
},
yAxis: {
title: {
text: 'MM $'
}
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y;
}
}
},
scatter:{
marker:{
symbol:'line',
lineWidth:11,
radius:8,
lineColor:'#f00'
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[12.15, 46.86],
[15.45, 42.28],
[27.77, 31.24]
]
},
{
name:'Base',type: 'scatter',data:[120],
}]
});
The problem is that the last series (Annual Costs) does not show, as it is in reversed order. Also, I'd like the Tornado Chart to look more like this:
Note that the labels in this chart are different from the actual values plotted. Also note that the bar in the center - in the example code, there would be a vertical line at 29.5. I would also like to support a combined uncertainty bar like the one at the bottom. Any suggestions would be greatly appreciated.
Your last bat is not showing, because first number is lower than second, see: http://jsfiddle.net/kErPt/1/
If you want to display another values at labels, then add that info first. Example:
data: [{
low: 12,
high: 15,
lowLabel: 35,
highLabel: 46
}, {
low: 2,
high: 35,
lowLabel: 15,
highLabel: 26
} ... ]
And then use dataLabels.formatter for series.
To add vertical line use plotLines.
I'm not sure what is the last bar called 'combined uncertainty'.
I've used Highcharts with separate series (thanks jlbriggs) to create a Tornado Chart: http://jsfiddle.net/uRjBp/
var baseValue = 29.5;
var outputTitle = "Net Sales";
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
//type:'column'
//type:'area'
//type:'scatter'
//type:'bubble'
},
credits: {},
exporting: {},
legend: {},
title: {
text: outputTitle
},
subtitle: {
text: "MM $"
},
tooltip: {
formatter: function() {
var msg = "";
var index = this.series.chart.xAxis[0].categories.indexOf(this.x);
var low = round(this.series.chart.series[0].data[index].y+baseValue);
var high = round(this.series.chart.series[1].data[index].y+baseValue);
if (this.x === "Combined Uncertainty") {
msg = "Combined Uncertainty in "+outputTitle+": "+low+" to "+high;
} else {
var lowLabel = this.series.chart.series[0].data[index].label;
var highLabel = this.series.chart.series[1].data[index].label;
msg = '<b>'+outputTitle+'</b> goes from '+ low +' to '+ high+'<br/> when '+this.x +
' goes from <br/> '+lowLabel+" to "+highLabel;
}
return msg;
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function () {
var index = this.series.chart.xAxis[0].categories.indexOf(this.x);
if (this.series.userOptions.labels === undefined) {
return this.y+baseValue;
}
return this.key === "Combined Uncertainty" ? "":this.series.userOptions.labels[index];
}
}
}
},
xAxis: {
title: {
text: 'Factor'
},
allowDecimals:false,
categories: ['Annual Revenue', 'Number of Years', 'Annual Costs', 'Combined Uncertainty']
},
yAxis: {
title: {
text: 'MM $'
},
labels: {
formatter:function() {
return this.value+baseValue;
}
}
},
series:[{
name: 'Low',
grouping:false,
type:'bar',
data:[{y:12.15-baseValue, label:10},{y:15.45-baseValue, label:1},{y:31.25-baseValue, label:2},{y:12.15-baseValue, color:'#99CCFF', label: ""}],
labels:[10,1,2,]
},{
name: 'High',
grouping:false,
type:'bar',
data:[{y:46.86-baseValue, label:30},{y:42.28-baseValue, label:3},{y:27.77-baseValue, label:4},{y:46.86-baseValue, color:'#99CCFF', label:""}],
labels:[30,3,4,]
},
{
name: 'Median',
type: 'scatter',
data: [null,null, null,27-baseValue],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
function round(num) {
return Math.round(num*100)/100;
}
usually, this kind of chart is done using a separate series for the left and right portions
One way to do this is by setting one set of data as negative numbers, and then using the formatters to make the axis labels, datalabels, and tooltips display the absolute values
example:
http://jsfiddle.net/jlbriggs/yPLVP/68/
UPDATE:
to show a line as in your original chart, you can extend the marker symbols to include a line type, and use a scatter series to draw that point:
http://jsfiddle.net/jlbriggs/yPLVP/69/
If you don't want to have the extra code for the line marker type, you could use any of the other existing marker symbols for the scatter series.
I am working with HighCharts to produce a bar chart. My values can range from as minimal as 0 to as high as 100k (example). Therefore, one bar of the graph can be very small and the other can be very long. HighCharts has introduced the feature of "Logarithmic Scaling". The example of which can be seen HERE
My js code is written in this jsfiddle file. I want to display my horizontal axis (x-Axis) logarithmically. I have inserted the key type as shown in the example but the script goes into an infinite loop which has to be stopped.
What is the flaw in the execution or is logarithmic scaling for HighCharts still not mature?
P.S The commented line in jsfiddle is causing the issue
Since the "official" method is still buggy, you can achieve the log scale more manually by manipulating your input data with a base 10 log and masking your output data raising 10 to the output value. See it in action here http://jsfiddle.net/7J6sc/ code below.
function log10(n) {
return Math.log(n)/Math.log(10);
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar',
marginRight: 200,
marginLeft: 10,
},
title: {
text: 'Negative'
},
xAxis: {
categories: [''],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: '',
align: 'high',
},
labels: {
formatter: function() {
return Math.round(Math.pow(10,this.value));
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -50,
y: 100,
floating: true,
borderWidth: 1,
shadow: true
},
tooltip: {
formatter: function() {
return '' + this.series.name + ': ' + Math.round(Math.pow(10,this.y)) + ' millions';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function() {
return Math.round(Math.pow(10,this.y));
}
}
}
},
credits: {
enabled: false
},
series: [{
"data": [log10(4396)],
"name": "A"},
{
"data": [log10(4940)],
"name": "B"},
{
"data": [log10(4440)],
"name": "C"},
{
"data": [log10(2700)],
"name": "D"},
{
"data": [log10(2400)],
"name": "E"},
{
"data": [log10(6000)],
"name": "F"},
{
"data": [log10(3000)],
"name": "G"},
{
"data": [log10(15000)],
"name": "E"}],
});
It is still experimental according to the Official Documentation, so that might be the case:
"The type of axis. Can be one of "linear" or "datetime". In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days.
As of 2.1.6, "logarithmic" is added as an experimental feature, but it is not yet fully implemented. Defaults to "linear".
Try it: "linear", "datetime" with regular intervals, "datetime" with irregular intervals, experimental "logarithmic" axis."
For those of you who are still looking for an answer :
JSFiddle : http://jsfiddle.net/TuKWT/76/
Or SO snippet :
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar'
},
title: {
text: 'Negative'
},
xAxis: {
categories: ['A','B','C','D','E','F','G','H'],
title: {
text: null
}
},
yAxis: {
type: 'logarithmic',
//min: 0, <= THIS WILL CAUSE ISSUE
title: {
text: null,
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return this.x + ':' + this.y + ' millions';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
}
},
credits: {
enabled: false
},
series: [{
"data": [4396,4940,4440,2700,2400,6000,3000,15000],
}],
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>