I have a relatively simple (highcharts) barchart and I'm wondering if it's possible to add a small image at the end of each bar (currently where the number is). It needs to be a different image for each bar.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Some Chart'
},
xAxis: {
categories: ['Archimedes','Curie','Darwin','Hawking','Newton','Pasteur'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Score',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' percent'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Group Team Performance',
data: [
{name: 'Archimedes', color: '#fe3932', y: 70},
{name: 'Curie', color: '#28d44e', y:66},
{name: 'Darwin', color: '#fce621',y:46},
{name: 'Hawking', color: '#003969', y:66},
{name: 'Newton', color: '#00afd5', y:64},
{name: 'Pasteur', color: '#b14fe0', y:56}
]
}
]
});
});
I've created a quick fiddle - http://jsfiddle.net/vou3uyyf/1/
Any help would be greatly appreciated!
Related
Sometimes the data label is getting shown inside of the bar.
For example in the given jsfiddle for the bar for 'Asia' the data label is showing inside the bar itself.
Is there any way to display the data labels always outside of the bar.
http://jsfiddle.net/n3me6r8k/
Highcharts.chart('container', {
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
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Year 2012',
data: [1052, 954, 4250, 740, 38]
}]
});
Yes, it could be done by setting two params more in your dataLabels configuration, namely:
dataLabels: {
enabled: true,
crop: false,
overflow: "none"
}
Normally, Highcharts will move label inside the bar when it could be cropped by frame of div. Configuration above, allows you to set that labels will not be cropped, even they are out of chart container.
JSFiddle: http://jsfiddle.net/daniel_s/8m1b4arv/
API reference: http://api.highcharts.com/highcharts/series%3Cbar%3E.dataLabels.crop
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
I have two charts that I am trying to load on separate div's on the same page, they are similar but one is a drill down and the other isn't. I have tried wrapping the entire function with var chart = $('#review').highcharts({ but it doesn't work.
The two charts are below:
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['Metric 1', 'Metric 2', 'Metric 3','metric 4'],
name = 'Votes',
data = [{
y: 1,
color: colors[0],
}, {
y: 2,
color: colors[1],
}, {
y: 3,
color: colors[2],
},{
y: 5,
color: colors[3],
}];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}
var chart = $('#review').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Review breakdown'
},
xAxis: {
categories: categories
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +'<br><b>'+ this.y +' stars</b><br/>';
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
}, yAxis: {min: 0, max: 5,
title: {text: 'Star Rating'}
}
})
.highcharts(); // return chart
});
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['positive', 'negative', 'sum'],
name = 'Votes',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'Positive votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [10.85, 7.35, 33.06],
color: colors[0]
}
}, {
y: -7.15,
color: colors[3],
drilldown: {
name: 'Negative votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [-4.55, -1.42, -0.23],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Total votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [ 0.12, 0.37, 1.65],
color: colors[4]
}
}];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}
var chart = $('#votes').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Vote breakdown'
},
subtitle: {
text: 'Click the columns to view breakdown.'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total votes'
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(name, categories, data);
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>'+ this.y +' votes</b><br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +' breakdown';
} else {
s += 'Click to return';
}
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
})
.highcharts(); // return chart
});
If you're trying to get two charts on one page then it is VERY simple.
<div id="chart-A" class="chart"></div>
<div class="spacer"></div>
<div id="chart-B" class="chart"></div>
CSS - Just to make the example a little easier on the eyes
.chart {
height: 200px;
}
.spacer {
height: 20px;
}
JavaScript
$(function() {
// If you need to specify any global settings such as colors or other settings you can do that here
// Build Chart A
$('#chart-A').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart A'
},
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
},
yAxis: {
min: 0,
title: {
text: 'Apple Consumption'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true
},
series: [{
name: 'Apples',
data: [5, 3, 8, 2, 4]
}]
});
// Build Chart B
$('#chart-B').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart B'
},
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
},
yAxis: {
min: 0,
title: {
text: 'Miles during Run'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true
},
series: [{
name: 'Miles',
data: [2.4, 3.8, 6.1, 5.3, 4.1]
}]
});
});
Here's a JSFiddle: http://jsfiddle.net/engemasa/7cvCX/
I am not really sure what some of your code is trying to do - seems a little needlessly complicated, FWIW
AS to how to make multiple charts on the same page - you do it just like you would make one chart on a page, just do it more than once :)
and make sure you have different container element ids - otherwise you are just overwriting one chart with the next.
One example of multiple charts on a page:
http://jsfiddle.net/kwtZr/1/
there's no relevant code to put here, just click the link
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/
With HighCharts 3.0, it is now possible to indicate to colors above and below one threshold. Like this example :
http://jsfiddle.net/highcharts/YWVHx/
Following code :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: data,
color: '#FF0000',
negativeColor: '#0088FF'
}]
});
});
});
Is it possible to have another threshold with a third color, like this for example :
Thanks in advance for your help.
It actually is possible if you don't mind plotting the data twice.
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
threshold : 0,
data: data,
color: 'orange',
negativeColor: 'blue'
},
{
name: 'Temperatures',
threshold : 10,
data: data,
color: 'red',
negativeColor: 'transparent'
}]
});
});
http://jsfiddle.net/YWVHx/97/
A feature to solve this without "hacks" was added in Highcharts 4.1.0 (February 2015), called zones (API). The given problem can be solved like this, using zones:
plotOptions: {
series: {
zones: [{
value: 0, // Values up to 0 (not including) ...
color: 'blue' // ... have the color blue
},{
value: 10, // Values up to 10 (not including) ...
color: 'orange' // ... have the color orange
},{
color: 'red' // Values from 10 (including) and up have the color red
}]
}
}
See this JSFiddle demonstration of how it looks.
Unfortunately this option is not possible, but you can request your suggestion in http://highcharts.uservoice.com and vote for it.
By the way, I can try use a plotLine, like this:
yAxis: {
title: {
text: 'My Chart'
},
plotLines: [{
id: 'limit-min',
dashStyle: 'ShortDash',
width: 2,
value: 80,
zIndex: 0,
label : {
text : '80% limit'
}
}, {
id: 'limit-max',
color: '#008000',
dashStyle: 'ShortDash',
width: 2,
value: 90,
zIndex: 0,
label : {
text : '90% limit'
}
}]
},