Is it possible to add series name inside a stacked area chart? Somehow I would like to add different series names inside their corresponding stacked areas. Any help would be appreciated!
Have you checked the API documentation? Look at the dataLabels.formatter:
formatter: function () {
return 'The value for <b>' + this.series.name +
'</b> is <b>' + this.y + '</b>';
}
This looks pretty ungainly but it works.
Here is a working example. I am using dataLabels only on the 5th point in the data series. I have some other options enabled and am including a box to better show the label. YMMV.
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
borderRadius: 5,
backgroundColor: 'rgba(252, 255, 197, 0.7)',
borderWidth: 1,
borderColor: '#AAA',
y: 75,
style: {
fontWeight: 'bold',
color: "#606060",
fontSize: "11px"
},
formatter: function () {
if (this.point.index === 4) {
return '<b>' + this.series.name + '</b>';
}
}
}
}
},
Related
How can I move the below datalabel football in the top right of the variable pie chart instead of showing in bottom. I tried these options
alignTo: 'connectors' or alignTo: 'toPlotEdges'
But nothing worked for me. Any help will be appreciated
var total = 80;
Highcharts.chart('container', {
chart: {
type: 'variablepie',
height: 370,
marginBottom: 50
},
credits: {
enabled: false
},
title: {
text: 'Football vs cricket',
align: 'center',
y: -5,
verticalAlign: 'bottom',
style: {
fontFamily: 'proxima_nova_bold',
fontSize: '20px',
fontWeight: 'normal',
color: '#8d99ab',
}
},
subtitle: {
text: ' ' + total + '<br/> Total',
useHTML: true,
verticalAlign: 'middle',
y: -20
},
xAxis: {
labels: {
rotation: 0
}
},
plotOptions: {
variablepie: {
size: 220,
dataLabels: {
enabled: true,
connectorColor: '#979797',
useHTML: true,
formatter: function () {
var key;
if(this.key == 'football'){
key = 'as football / Lionel Messi';
}else if(this.key == 'cricket'){
key = 'as cricket / Sachin Tendulkar';
}else{
key = this.key;
}
return '<span class=cls1>' + this.y + '</span>' + '<span class=cls2>' + key + '</span>';
}
},
showInLegend: true,
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
legend: {
enabled: false
},
series: [{
minPointSize: 10,
innerSize: '70%',
zMin: 0,
data: [{name: "football", y: 71, z: 30}, {name: "cricket", y: 2, z: 18}]
}]
});
https://jsfiddle.net/anikettiwari/Lr3zy8qc/2/
You can try to implement one of the options showed here: https://www.highcharts.com/docs/advanced-chart-features/pie-datalabels-alignment
Or use the render callback and set the y position of this particular label manually.
Demo: https://jsfiddle.net/BlackLabel/2oskhmnd/
events: {
render() {
let chart = this;
chart.series[0].points[0].dataLabel.attr({y: 10});
chart.series[0].points[0].connector.hide();
}
}
Unfortunately, this solution requires to render the custom connector to moved dataLabel. You can do it by using some of the methods shown in the above link (pie-datalabels-alignment) or by using SVGRenderer tool to render a path: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
API: https://api.highcharts.com/highcharts/chart.events.render
I'm creating a heatmap from highcharts that shows the allocation to different asset classes for multiple portfolios. The y-axis contains asset classes and the x-axis contains the portfolios (1 - 20).
The heatmap I've constructed looks very much like the one in this demo: https://www.highcharts.com/demo/heatmap. What I would like to do is to essentially construct a heatmap per column (or per portfolio). Is this possible with highcharts?
I'm using the code below to construct the heatmap currently:
Highcharts.chart('portfolioChart', {
chart: {
type: 'heatmap',
height: 700
},
title: {
text: 'After-tax Portfolio Composition'
},
xAxis: {
categories: json.columns,
align: 'top'
},
yAxis: {
categories: json.index,
title: null,
reversed: true
},
colorAxis: {
min: 0,
minColor: '#fff',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 600
},
tooltip: {
formatter: function() {
return '<b>' + this.series.xAxis.categories[this.point.x] + ', ' + this.series.yAxis.categories[this.point.y] + '</b> = ' + (this.point.value*100).toFixed(1) + '%'
}
},
series: [{
name: 'Portfolio Allocation',
borderWidth: 1,
data: portfolioData,
dataLabels: {
enabled: true,
color: '#000',
formatter: function() {
return (this.point.value * 100).toFixed(1) + '%';
}
}
}]
});
I am trying to make a highchart, with both negative and positive values. Now the thing is, that negative values, are not very big, compared to the positive ones.
Here is a picture of the graph as is:
Now if you look closely on both the y-axis, they do not meet up at 0, there is a tiny gap. Is it possible to make them both start at 0, but allowing them to be negative?
This is my code:
Highcharts.chart('chart', {
chart: {
type: 'column'
},
title: {
text: 'Sales Graph'
},
xAxis: {
categories: xAxisTicks
},
plotOptions: {
column: {
stacking: 'normal'
}
},
tooltip: {
formatter: function() {
debugger;
if (this.series.type == "column") {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + prettyNumber(this.y) + '<br/>' +
'Sales without discount: ' + prettyNumber(this.point.stackTotal);
} else {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + prettyNumber(this.y) + '<br/>';
}
}
},
colors: ['yellow', 'orange', 'red', 'blue', 'green', 'red', 'blue', 'green'],
yAxis: [
{
title: {
text: 'Daily sales'
},
min: minYAxisValue,
startOnTick: false
}, {
title: {
text: 'Accumulated sales'
},
min: minYAxisValue,
startOnTick: false,
opposite: true
}
],
series: data
});
If you want two to align 0 tick together that is not yet possible with highcharts. Follow this discussion https://highcharts.uservoice.com/forums/55896-general/suggestions/2554384-multiple-axis-alignment-control?page=3&per_page=20.
However you can try this simple workaround:
Have fixed min/max on both y Axes:
yAxis: [{ min: minYAxisValue, max: maxYAxisValue }
Or just link second axis to the first:
yAxis: [{ opposite: true, linkedTo: 0 }
I have the following pie chart: http://jsfiddle.net/wjqrh/76/
new Highcharts.Chart({
chart: {
renderTo: 'f-chart-container',
type: 'pie',
backgroundColor: 'rgba(255, 255, 255, 0)'
},
title: {
text: ''
},
plotOptions: {
pie: {
shadow: true,
dataLabels: {
formatter: function () {
return '<span style="color: ' + this.point.color + '; font-weight: bold; font-size: 115%">'
+ this.point.percentage.toFixed(1)
+ '%</span>';
},
distance: 3,
connectorWidth: 0,
x: 0,
y: 0
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b>: '
+ this.point.y
}
},
series: [
{
name: '',
data: data,
size: '73%',
innerSize: '50%',
showInLegend: false
}
],
colors: colors
});
The label of the violet sector is placed somewhere right but I would like to place it exactly in the center, like the third (green) sector's label is displayed.
The same label positioning thing is happening with orange and cyan sectors.
How can I force to place labels in the center of the sector?
Only what comes to my mind is using translate() function, which allows to move SVG elements.
http://jsfiddle.net/wjqrh/77/
chart.series[0].data[5].dataLabel.translate(275,520);
I have the following HighChart code. I would like to make the data & categories available through an object rather than hard coding it, so that at a later point I can dynamically get the data and assign to the object. Please let me know the necessary changes that needs to be made for this purpose. Thanks in advance.
$('#stackedChartContainer').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['IAS', 'Funding', 'Gilts', 'BuyOut']
},
yAxis: {
min: 0,
title: {
text: 'Millions'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Pensioners',
data: [800000000, 904080340, 961576651, 998929115]
}, {
name: 'Deferreds',
data: [700000000, 925466733, 1063478804, 1158224555]
}, {
name: 'Active',
data: [200000000, 265524863, 305739877, 333386521]
}]
});
You can use addSeries / addPoint / setData functions which allows to modify data / series. Categories can be modified by setCategories() function. All of them are documented here: http://api.highcharts.com/highcharts
In case when you would like to dynamically get data i.e from server/database etc, you can use ajax calling.
Example of it are avaiable here: http://docs.highcharts.com/#preprocessing