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 am making a column range chart with some time range. Basically want to plot different time taken by different processes as they progress one after other. Here is the fiddle as an example.
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway, 2009'
},
xAxis: {
categories: ['02/07/2013', '03/07/2013', '04/07/2013']
},
yAxis: {
type: 'datetime',
title: {
text: 'Temperature ( °C )'
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '°C';
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[Date.UTC(2013, 07, 02, 21, 0, 0), Date.UTC(2013, 07, 03, 4, 0, 0)],
[Date.UTC(2013, 07, 02, 21, 0, 0), Date.UTC(2013, 07, 03, 5, 0, 0)],
[Date.UTC(2013, 07, 02, 21, 0, 0), Date.UTC(2013, 07, 03, 6, 0, 0)]
]
}]
});
});
http://jsfiddle.net/XBmB5/2/
In this example, I am not able to get the tool top as "process X started at x time and ended as y time".
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b> started at <b>' + Highcharts.dateFormat('%H:%M', this.y[0]);
}
When I am taking value as this.Y, I am getting only the start time.
Any help in this regard will be highly appreciated.
use the point.low and point.high values
tooltip: {
formatter: function () {
console.log(this);
return '<b>' + this.x + '</b> started at <b>' + Highcharts.dateFormat('%H:%M', this.point.low) + '</b> and ended at <b>' + Highcharts.dateFormat('%H:%M', this.point.high) + '</b>';
}
},
http://jsfiddle.net/JnGVh/
This will emulate the default Highcharts style, but with correctly formatted time.
tooltip: {
formatter: function () {
var low = Highcharts.dateFormat('%H:%M', this.point.low);
var high = Highcharts.dateFormat('%H:%M', this.point.high);
return '<span style="font-size: 10px">' + this.point.key + '</span><br/><span style="color:' + this.point.color + '">\u25CF</span> ' + this.series.name + ': <b>' + low + ' - ' + high + '</b><br/>';
}
}
I am using the columnrange type from Highcharts-more.
The default data labels formatter puts the min / max data at both ends of the range, which is nice.
Is there a way to attach another label to each point? (for example : the data name, right in the middle of the bar)
Please see my work at:
JSFiddle
This is a family tree with life ranges.
I'd like to display the names shown in tooltips at the center of bars.
(FYI I tried to overload the chart with text using the renderer : it worked... but the texts were attached to the chart, not to the points, and zooming left them in place, while the points moved around. Is there maybe a way to attach text labels to the each point on the chart onLoad event?)
Thank you.
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true,
marginLeft: 40,
zoomType: 'xy'
},
title: {
text: 'My family tree'
},
xAxis: {
labels: {
enabled: false
},
min: 0,
max: 10
},
yAxis: {
type: 'datetime',
min: new Date().setYear(1900).valueOf(),
max: new Date().valueOf(),
title: {
text: 'Year'
},
endOnTick: false
},
legend: {
enabled: false
},
plotOptions: {
columnrange: {
grouping: false,
pointPadding: 0,
dataLabels: {
enabled: true,
useHTML: true,
formatter: function () {
if (new Date().setHours(0, 0, 0, 0) !== new Date(this.y).setHours(0, 0, 0, 0)) return '<span style="color:black">' + Highcharts.dateFormat('%Y', this.y) + '</span>';
else return '';
}
}
}
},
tooltip: {
headerFormat: '{series.name}<br/>',
formatter: function () {
var l = this.point.name + '<br/>' + Highcharts.dateFormat('%e/%m/%Y', this.point.low);
if (new Date().setHours(0, 0, 0, 0) !== new Date(this.point.high).setHours(0, 0, 0, 0)) l += '<br/>' + Highcharts.dateFormat('%e/%m/%Y', this.point.high);
return l;
}
},
series: [{
color: 'rgb(100,100,255)',
pointWidth: 150,
data: [{
name: 'Yann B',
low: Date.UTC(1976, 1, 27),
high: new Date().valueOf(),
x: 1 * 10 / 2
}]
}, {
color: 'rgb(150,150,255)',
pointWidth: 70,
data: [{
name: 'Jean-Yves B',
low: Date.UTC(1947, 3, 26),
high: Date.UTC(2006, 2, 10),
x: 1 * 10 / 4
}, {
name: 'Josiane M',
low: Date.UTC(1946, 8, 21),
high: Date.UTC(1998, 11, 26),
x: 3 * 10 / 4
}]
}, {
color: 'rgb(200,200,255)',
pointWidth: 30,
data: [{
name: 'Guillaume B',
low: Date.UTC(1907, 7, 4),
high: Date.UTC(1988, 1, 11),
x: 1 * 10 / 8
}, {
name: 'Marie-Jeanne S',
low: Date.UTC(1911, 7, 17),
high: Date.UTC(1986, 2, 3),
x: 3 * 10 / 8
}, {
name: 'Joseph M',
low: Date.UTC(1921, 3, 11),
high: Date.UTC(1996, 4, 23),
x: 5 * 10 / 8
}, {
name: 'Marie K',
low: Date.UTC(1925, 4, 4),
high: new Date().valueOf(),
x: 7 * 10 / 8
}]
}]
});
});
The use of the "inside" propriety is indeed relevant here. But I had to bypass the bug inherent to its use (see comment to last answer).
Here is a piece of code that works for datalabels. There still is a zIndex issue with the tool tips, and I'll try to post a more complete solution soon.
http://jsfiddle.net/SineDie/TREwr/1/
dataLabels: {
inside: true,
enabled: true,
useHTML: true,
formatter: function () {
if (this.y === this.point.low) {
var l = '<div style="text-align:center;color:black;width:' + (this.point.plotLow - this.point.plotHigh) + 'px">'
+ Highcharts.dateFormat('%Y', this.point.low) + ' - '
+ this.point.name;
// to avoid marking as dead if still living...
if (new Date().setHours(0, 0, 0, 0) !== new Date(this.point.high).setHours(0, 0, 0, 0))
l += ' - ' + Highcharts.dateFormat('%Y', this.point.high);
l += '</div>';
return l;
}
else return '';
}
}
I did some modifications on formatter funcution. set datalabels inside property true and attach datanames to point's high values.
dataLabels: {
inside:true,
enabled: true,
useHTML: true,
formatter: function () {
if (new Date().setHours(0, 0, 0, 0) !== new Date(this.y).setHours(0, 0, 0, 0)) {
if (this.y == this.point.high){
return '<span style="color:black">' + Highcharts.dateFormat('%Y', this.y) +' - '+ this.point.name + '</span>';
}
return '<span style="color:black">' + Highcharts.dateFormat('%Y', this.y) + '</span>';
}
else return '';
}
}