I need to have the series name printed on each column. Right now you can only print the value of the column as a label. http://jsfiddle.net/mVxGz/
Any ideas on how to do that?
plotOptions: {
series: {
dataLabels: {
align: 'left',
enabled: true,
rotation: 270,
inside: true
}
}
}
This can be done via the formatter. For example:
formatter: function () {
return this.series.name + ' - ' + this.y;
}
Related
I am using HighChart library to show Pie Chart on my page, I am keeping showTable always true to show every time.
The problem is whenever data binds to charts using JQuery Ajax post dynamically, i see proper data in chart but also it keeps adding new data table everytime at the bottom. E.g. First time there will be only one table, after another call there will be two tables added and so on. Why Hightcharts not updating the same table again or is there a way to kill any existing table.?
hc = Highcharts.chart(chartName, {
chart: {
type: 'pie',
options3d: {
enabled: false,
alpha: 45
},
style: {
color: '#575962'
}
},
title: {
text: title,
style: {
color: '#575962',
fontweight: '400'
}
},
subtitle: {
text: 'Current Month(Top 10)'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
credits: {
enabled: false
},
exporting: {
showTable: true
},
series: [{
name: 'Price',
data: [],
dataLabels: {
formatter: function () {
//const point = this.point;
//return '<span style="color: #575962;font-size:11px;font-weight: 400">' +
// point.name + ': $' + point.y + '</span>';
}
}
}]
});
Why Hightcharts not updating the same table again or is there a way to kill any existing table.?
I have achieved this by removing the series on each call and adding them again with new data. Hope this helps if anyone else looking and couldn't find any other answer.
//Removing Series
while (hc.series.length > 0) {
hc.series[0].remove(false);
}
//Adding new Series
hc.addSeries({
name: 'Price',
data: [],
dataLabels: {
formatter: function () {
const point = this.point;
return '<span style="color: #575962;font-size:11px;font-weight: 400">' +
point.name + ': $' + point.y + '</span>';
}
}
});
//Binding Series data
var res = result.Data.slice(0, 10);
res.forEach(function (element, index) {
hc.series[0].addPoint({
name: element.ResourceGroupName,
y: element.TotalMonthlyPrice,
});
});
I am using high chart in my project. Currently when user mouse over on the data points the tool tip will be displayed top to the data points. Some times the data are big and the tool tip will look very big, hence user wants to display the tool tip value next to the legend title during mouse over of the data points.
Example Legends should look like below:
Female % 23 Male % 22
Here 23 and 22 are the data points value which should be printed next to legend label when we mouse over on the data points.
The 23 and 22 value should be changed as per the mouse over on the data points.
enter code here
primaryChart = $('#container').highcharts('StockChart', {
chart: {
// my code
},
yAxis: [{
// my code
}],
xAxis: {
// my code
},
plotOptions: {
// my code
},
tooltip: {
//enabled: false,
followPointer: false,
useHTML: true,
formatter: function () {
//debugger;
var precision;
var s = '<b>' + Highcharts.dateFormat('%A, %b %e %Y, %H:%M:%S', new Date(this.x)) + '</b>';
$.each(this.points, function () {
precision = GetTooltipData(this.series.options.paramID);
s += '<br/ ><span style="color:' + this.series.options.color + '">' + this.series.name + '</span> : ' + parseFloat(this.y.toFixed(precision)) + ' ' + this.series.yAxis.axisTitle.textStr;
// s += "<div class='comment_filter'><a class='comments_buble' href='#' data-series='" + this.point.index + "'>Comment</a></div>";
});
return s;
},
shared: true
},
series: chartData,
rangeSelector: {
selected: 4,
inputEnabled: false,
buttonTheme: {
visibility: 'hidden'
},
labelStyle: {
visibility: 'hidden'
}
},
legend: {
enabled: true,
layout: 'horizontal',
align: 'left',
borderColor: '#909090',
verticalAlign: 'top'
},
credits: {
enabled: false
}
});
You can use positioner function for tooltip to place it next to a legend:
tooltip: {
positioner: function() {
var legend = this.chart.legend,
x = legend.group.translateX + legend.legendWidth,
y = legend.group.translateY;
return {
x: x,
y: y
};
},
...
}
Live demo: https://jsfiddle.net/BlackLabel/3rsp4bdy/
API Reference: https://api.highcharts.com/highcharts/tooltip.positioner
enter code here
tooltip: {
followPointer: true,
useHTML: true,
split: false,
formatter: function () {
var s = '<span>' + this.series.name +'</span>';
this.series.legendItem.element.innerHTML = s;
return false;
},
shared: true,
},
I have created a highcharts type column for 2 series Men and Women. I want to display the total counts which is Installs and display below Legend as shown in the image.
How do I use the HTML with Icons with the total values.
Here is my code for the highcharts and JSFiddle
$(function () {
$('#stats-container').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: null,
xAxis: {
categories: ['15-20', '20-25', '25-30', '30-35', '35-40', '40-45', '45-50']
},
yAxis: {
min: 0,
max: 90,
pointInterval: 30,
labels: {
formatter: function () {
return this.value + 'K';
}
},
title: null
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y;
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
legend: {
enabled: true,
align: 'center',
verticalAlign: 'top',
layout: 'horizontal'
},
series: [{
name: 'Men',
color: '#79ccde',
data: [57.56, 82, 32, 28, 12, 13, 7],
stack: 'male'
}, {
name: 'Women',
color: '#8787f5',
data: [33.66, 60, 35, 15, 10, 16, 9],
stack: 'female'
}]
});
});
How can I achieve the same legend with total counts and custom HTML?
For calculating total values of both series and displaying it in your legend you can use legend.labelFormatter:
http://api.highcharts.com/highcharts#legend.labelFormatter
Inside labelFormatter function you can iterate over all of your series points and add its value to sum you want to show in your label.
If you want to add image to your legend label you need to set legend.useHTML to true:
http://api.highcharts.com/highcharts#legend.useHTML
Then you can format your legend as HTML div. For example:
labelFormatter: function() {
var target = '<br>Target: ' + this.userOptions.target || 0,
installs = 1,
string, img;
Highcharts.each(this.userOptions.data, function(p, i) {
installs += p;
});
if (this.name === "Women") {
img = '<img src = "http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Woman_Silhouette_52.svg/2000px-Woman_Silhouette_52.svg.png" style = "width:45px"/> ';
} else if (this.name === "Men") {
img = '<img src = "https://upload.wikimedia.org/wikipedia/commons/1/17/Human_outline.svg" style = "width:20px"/> ';
}
string = '<div style = "width: 200px">' + '<div class = "leg">' + img + '</div>' + '<div class = "leg">' + this.name + target + '<br>Installs: ' + installs + '</div>' + '</div>';
return string
}
For hiding standard legend symbol you can set its width to 0:
http://api.highcharts.com/highcharts#legend.symbolWidth
If you want to show your tooltip the same way as you show in your image, you can use tooltip.shared property:
http://api.highcharts.com/highcharts#tooltip.shared
example:
http://jsfiddle.net/am6zjhrj/10/
Is there way to set the label of an Bar Chart to 50% of the charts width? I've tried this but it does not work:
xAxis: {
categories: [],
labels: {
formatter: function() {
var text = this.value;
return '<div class="js-ellipse" style="width:100%; overflow:hidden; text-overflow: ellipsis" title="' + text + '">' + text + '</div>';
},
style: {
width: '50%'
},
useHTML: true
}
},
So goal is to have labels on the left side of the bar chart that are 50% of the width of the whole chart container.
You have an option for that in the plotOptions :
plotOptions: {
bar: {
dataLabels: {
enabled: true,
inside: true
// ^^^^^^^^^^^^
}
}
},
The property inside :
For points with an extent, like columns, whether to align the data label inside the box or to the actual value point. Defaults to false in most cases, true in stacked columns.
And an example forked from the official documentation : http://jsfiddle.net/XXB9k/
EDIT :
There is another option to center the x labels (I don't know witch labels your are talking about), but there is a solution not far away from your code :
xAxis: {
...
labels: {
enabled: true,
x: this.width / 2,
}
}
An example : http://jsfiddle.net/QMPkh/
FINAL EDIT :
In fact you can simply use the width of the chart in the label formatter :
labels: {
enabled: true,
formatter: function() {
return '<div style="width:' + (this.axis.width/2) +'px">'+this.value+'</div>';
},
useHTML: true
}
An example to show the result : http://jsfiddle.net/QMPkh/2/
Unfortunately width in percent is not supported, only in pixels.
Based on: How to position datalabel at the base of bar series
I've made some updates so that a column chart shows a stacked column for 100%-total
However, using:
stackLabels: {
formatter: function() {
return this.total + '%';
},
enabled: true,
verticalAlign: 'middle',
align: 'left',
y:10
},
I am getting the total 100% for the entire stack. How can I adjust the formatter to only show the value for a single series?
Try this.
formatter: function() {
return this.total + '%';
},
I have trying SUM for 3 number of stack bar and it only using enable : true;
I am not sure but to get value for individual series you can use this.y or this.x.
try
return this.x OR
return this.y