i will like the possibility of disabled some labels of my chart
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
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: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +' millions';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#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]
}, {
name: 'Year 2009',
data: [873, 614, 4054, 732, 34]
}, {
name: 'Year 2010',
data: [573, 1500, 4054, 732, 34]
}, {
name: 'Year 2012',
data: [373, 1380, 4054, 732, 34]
}]
});
});
});
http://jsfiddle.net/tkGFr/
for example, this chart will show all the labels and i will like the possibility of make only enabled 2 or 3 (year 1800, 1900 and 2009) of them but always maintaining the other options (year 2008, 2010 and 2012)
is this possible?
i appreciate your help and advice :D
As I assume, you would like to have enabled "year 1800, 1900 and 2009" in legend and displayed in chart, but other only in legend? If yes you can use visible parameter
{
name: 'Year 1800',
visible: false,
data: [107, 31, 635, 203, 2]
}
Even showInLegend: false; can be used; if want to hide in legends.
Related
In Highcharts, how do I control the gaps between categories?
I've highlighted the area I am talking about in blue below:
I want to make my highchart chart gaps look like this powerpoint version on the left below. The bars in PowerPoint go all the way to the end of the plot area, but highcharts have this big gap.
https://jsfiddle.net/15u0r64s/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Total', 'Male', 'Female', 'Other'],
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: 80,
floating: true,
borderWidth: 1,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Total',
data: [10, 20, 31, '']
}, {
name: 'Male',
data: [10, 20, 60, 2]
}, {
name: 'Female',
data: [10, 20, 61, '']
}, {
name: 'Other',
data: [10, 20, 65, 4]
}]
});
You need to edit groupPadding and pointPadding properties:
plotOptions: {
bar: {
groupPadding: 0.05,
pointPadding: 0
}
}
Live demo: https://jsfiddle.net/BlackLabel/oqpxmL18/
API Reference:
https://api.highcharts.com/highcharts/series.bar.groupPadding
https://api.highcharts.com/highcharts/series.bar.pointPadding
I have used the customevents to make the labels on the x-axis clickable. And If you click it (for example, click "[Sale]") there will be an alert.
Check this: http://jsfiddle.net/dq8wbdeu/1/
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0,
labels:{
formatter:function(){return '['+this.value+']'},
events:{
click:function(){alert(this)}
}
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
pointPlacement: 'on'
}]
});
});
I hope the lable "[Sale]" to become red after clicking, is that possible? How can I achieve that? I tried this.style.color='red' but failed. And since "this" in the function block is a bit weird, I don't know what should I do now.
Thanks!
If space is too tight, the axis labels are truncated. I'm dealing with variable categories, so I'd prefer to have them overlap rather than disappear.
Example:
http://jsfiddle.net/z1axtk31/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Sub-saharan Africa', 'North America', 'South America', 'East Asia', 'Middle East', 'Europe', 'Oceania', 'Ancapistan', 'North Africa', 'Mordor', 'Atlantis'],
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, 45, 23, 201, 50, 89, 210]
}/*, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6, 45, 23, 166, 50, 20, 110]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34, 45, 23, 20, 50, 133, 100]
}*/]
});
});
Simply set:
xAxis: {
labels: {
step: 1
}
}
Example
I'm using Highcharts.js library and when Bar Chart height is small, yAxis labels get skipped. By increasing the size of the bar chart the labels appear again. How do you avoid the labels disappearing.
See this jsfiddle for example - http://jsfiddle.net/VbecE/3/
<script src="http://code.highcharts.com/highcharts.js"></script>
<h3>Why does this skip yaxis labels America and Europe?</h3>
<div id="container" style="min-width: 310px; height: 150px; margin: 0 auto"></div>
<h3>10px bigger and all 5 yaxis labels visible</h3>
<div id="container2" style="min-width: 310px; height: 170px; margin: 0 auto"></div>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify',
crop:false
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
crop:false
}
},
series: {
dataLabels:{
crop:false}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#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]
}]
});
});
$(function () {
$('#container2').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify',
crop:false
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
crop:false
}
},
series: {
dataLabels:{
crop:false}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#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]
}]
});
});
You can set step parameter as 1,
labels: {
step:1,
}
http://jsfiddle.net/VbecE/7/
I want to reduce space between bar chart series data. Below mentioned is the image which gives a clear picture :
Can anyone suggest the best approach to do it?
$(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: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635],
pointWidth: 22,
}, {
name: 'Year 1900',
data: [133, 156, 947],
pointWidth: 22
}]
});
});
http://jsfiddle.net/fMdk3/5/
The options you want to play with are pointPadding (padding between bars) and groupPadding (padding between seies).
e.g.
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0.1,
}
},
e.g. http://jsfiddle.net/BZzWQ/