Related
Is it possible to make the following chart with Highcharts library?
It's a simple line chart but with inverted triangle shaped grid. Is there any predefined type or a way to customize the grid shape? Any pointers which will guide me to a proper direction would help. Thank you!
Another method of how to create this type of chart:
Demo
Highcharts.chart('container', {
chart: {
width: 500,
},
xAxis: {
opposite: true,
title: {
text: 'Report Date'
},
gridLineWidth: 1,
type: 'datetime',
categories: ['01/01/2012', '02/01/2012', '03/01/2012', '04/01/2012', '05/01/2012', '06/01/2012', '07/01/2012', '08/01/2012', '09/01/2012', '10/01/2012'],
tickmarkPlacement: 'on',
labels: {
rotation: -90,
y: -18
},
offset: -13,
lineWidth: 0,
max: 8.6,
},
legend: {
enabled: false
},
yAxis: {
title: {
text: 'Milestones'
},
categories: ['01/01/2012', '02/01/2012', '03/01/2012', '04/01/2012', '05/01/2012', '06/01/2012', '07/01/2012', '08/01/2012', '09/01/2012', '10/01/2012'],
tickmarkPlacement: 'on',
gridLineWidth: 1,
tickPosition: 'inside',
min: 0,
minPadding: 0,
startOnTick: false
},
series: [{
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
marker: {
enabled: false
},
color: 'grey',
enableMouseTracking: false,
animation: false
}, {
data: [6, 6, 6, 7, 8, 7, 7, 8, 8.5, 9]
}, {
data: [5, 5, 5, 6, 6.5, 6, 6.5, 7.5, 8]
}, {
data: [4, 4, 4, 5, 5.5, 5.5, 6]
}, {
data: [2, 2.5, 2.5, 3.5, 4]
}, {
data: [1, 1.5, 2]
}, {
type: 'arearange',
data: [[0, 0, -5], [9.2, 9, -5]],
color: 'white',
fillOpacity: 1,
marker: {
enabled: false
},
zIndex: -1,
enableMouseTracking: false,
animation: false
}]
});
There is no such series type. However, you can make it with fake polygon series that will hide half of the chart. Check demo and code posted below.
Code:
Highcharts.chart('container', {
chart: {
height: 500,
width: 500,
events: {
load: function() {
var chart = this,
polygon = chart.series[2].group,
x = polygon.translateX,
y = polygon.translateY;
polygon.translate(x + 3, y + 3);
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
opposite: true,
gridLineWidth: 1,
gridLineColor: '#ddd',
tickInterval: 1,
maxPadding: 0,
lineWidth: 0,
max: 10,
min: 0
},
yAxis: {
maxPadding: 0,
tickInterval: 1,
gridLineColor: '#ddd',
max: 10,
min: 0
},
series: [{
name: 'Installation',
data: [8, 6, 7, 8, 7, 6]
}, {
name: 'Manufacturing',
data: [3, 2, 4, 4]
}, {
type: 'polygon',
animation: false,
showInLegend: false,
enableMouseTracking: false,
color: '#fff',
lineWidth: 10,
data: [
[0, 0],
[10, 0],
[10, 10]
]
}, {
type: 'line',
showInLegend: false,
enableMouseTracking: false,
data: [
[0, 0],
[10, 10]
],
color: '#ddd',
lineWidth: 1,
marker: {
enabled: false
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
Demo:
https://jsfiddle.net/BlackLabel/xL9taoym/1/
You can use Highcharts SVG Renderer to render triangle that covers half of the chart.
Check this demo: https://jsfiddle.net/BlackLabel/2boma9zs
events: {
load: function() {
var chart = this,
left = chart.plotLeft,
top = chart.plotTop,
width = chart.plotSizeX,
height = chart.plotSizeY;
chart.renderer.path([
'M', left + 1, top + height,
'L', left + width + 1, top,
left + width + 3, top,
left + width + 3, top + height + 3,
left + 1, top + height + 3,
left + 1, top + height
])
.attr({
fill: '#fff'
})
.add()
.toFront();
}
}
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
https://api.highcharts.com/class-reference/Highcharts.SVGElement#toFront
https://api.highcharts.com/highcharts/chart.events.load
I am using Stacked and grouped column to display data, I want to show the yAxis stackLabels and let it below yAxis as the picture shown below:
below is my core code and I have created a jsfiddle to show the result:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
offset:30
},
yAxis: {
allowDecimals: false,
//offset:10,
title: {
text: 'Number of fruits'
},
stackLabels: {
enabled: true,
verticalAlign: 'bottom',
//y:30, //it will won't display labels if y is greater than 0
style: {
fontWeight: 'bold',
color: 'gray'
},
formatter: function() {
return this.stack;
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Stack: ' + this.series.options.stack;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});
I found that if I set the value of y greater than 0 it will not show the stacklabels.
Can anyone help me, thanks a lot!
stackLabels: {
enabled: true,
verticalAlign: 'bottom',
y:30, //it will won't display labels if y is greater than 0
style: {
fontWeight: 'bold',
color: 'gray'
},
formatter: function() {
return this.stack;
}
}
You can simply use CSS (see https://www.highcharts.com/docs/chart-design-and-style/style-by-css):
.highcharts-stack-labels text {
transform: translate(0, 20px);
}
Your fiddle updated: https://jsfiddle.net/beaver71/jraw54c2/
By default It is as you say
I found that if I set the value of y greater than 0,it will not show the stacklabels
To have desired behavior, you have to do following things:
1>Add extra series with negative values in each stack.
series: [{
name: 'test',
data: [-1, -1, -1, -1, -1],
stack: 'male',
color: 'transparent', //transparent color
showInLegend: false, //hide legend
}, {
name: 'tests',
data: [-1, -1, -1, -1, -1],
stack: 'female',
color: 'transparent',
showInLegend: false,
}, {
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
2> In stackLabel property of yAxis you have to hide positive value stack labels
formatter: function() {
if (this.isNegative) {
return this.stack;
}
}
3>yAxis values should start from 0 show hide negative values,
labels: {
formatter: function() {
console.log(this.value)
if (this.value > -1) {
return this.value
}
}
},
4>Similarly tooltip should not activate on negative values
tooltip: {
formatter: function() {
if (this.y > -1) {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Stack: ' + this.series.options.stack;
} else {
return false;
}
}
},
Applying this output
$(function() {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
//offset:30
},
yAxis: {
allowDecimals: false,
//offset:10,
labels: {
formatter: function() {
if (this.value > -1) {
return this.value
}
}
},
title: {
text: 'Number of fruits'
},
stackLabels: {
enabled: true,
verticalAlign: 'bottom',
y: 0,
style: {
fontWeight: 'bold',
color: 'gray'
},
formatter: function() {
if (this.isNegative) {
return this.stack;
}
}
}
},
tooltip: {
formatter: function() {
if (this.y > -1) {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Stack: ' + this.series.options.stack;
} else {
return false;
}
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'test',
data: [-1, -1, -1, -1, -1],
stack: 'male',
color: 'transparent',
showInLegend: false,
tooltip: {
pointFormat: ''
}
}, {
name: 'tests',
data: [-1, -1, -1, -1, -1],
stack: 'female',
color: 'transparent',
showInLegend: false,
tooltip: {
pointFormat: ''
}
}, {
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
I'm new to highcharts, but I seem to have an issue with the display of the large heatmap. The colors in the legend don't seem to match the colors in the actual chart.
The following is my chart configuration code.
function load_team_effort_by_day_of_week_heat_map(ele, config)
{
var self = $(ele);
var days = ["Monday", "Tuesday", "Wednesday", "Thursday","Friday", "Saturday", "Sunday"]
load_data(self, function(response)
{
var div = $("<pre/>")
.attr("id","csv")
.css("display","none");
div.html(response.data);
$("body").append(div);
var chart_container = self.attr("chart-container");
$("#"+chart_container).css("width","100%");
var min = new Date(response.min)
var max = new Date(response.max)
var max_value = response.max_range
var mid_range = parseFloat(max_value/4);
Highcharts.chart(chart_container, {
data: {
csv: document.getElementById('csv').innerHTML
},
chart: {
type: 'heatmap',
margin: [60, 10, 80, 50]
},
boost: {
useGPUTranslations: true
},
title: {
text: '',
align: 'left',
x: 40
},
subtitle: {
text: '',
align: 'left',
x: 40
},
xAxis: {
title: {
text: config.xlabel
},
type: 'datetime',
min: Date.UTC(min.getFullYear(), min.getMonth(), min.getDate()),
max: Date.UTC(max.getFullYear(), max.getMonth(), max.getDate()),
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%b-%d-%Y}' // long month
},
showLastLabel: false,
tickLength: 16
},
yAxis: {
title: {
text: config.ylabel
},
labels: {
format: '{value}'
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickPositions: [0, 1, 2, 3, 4, 5, 6],
tickWidth: 1,
min: 0,
max: 6,
reversed: true
},
colorAxis: {
stops: [
[0, '#EEEEEE'],
[mid_range, '#00ee33'],
[max_value, '#00ee33']
],
min: 0,
max: max_value,
startOnTick: false,
endOnTick: false,
labels: {
format: '{value}'
}
},
tooltip: {
formatter: function () {
var d = new Date(this.point.x)
var todate=d.getDate();
var tomonth=d.getMonth()+1;
var toyear=d.getFullYear();
var original_date=tomonth+'/'+todate+'/'+toyear;
return '<b>' + original_date + ', <b>' +
this.point.value + '</b> on <br><b>' + days[this.point.y] + '</b>';
}
},
series: [{
boostThreshold: 100,
borderWidth: 0,
nullColor: '#EEEEEE',
colsize: 7 * 24 * 36e5, // one week
turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}]
});
self.parents('.white-background').removeClass("loadingdv");
self.parents('.white-background').find(".lodimg").remove();
//Remving extra div for legends on rite side
self.parents('.white-background').find(".legendcontainer").remove();
});
}
So, I have got this code, and when the cell value is NaN (Not a number), it is showed with the black colour, not with this one, and the tooltip with all the decimals. What am I missing?
plotOptions: {
heatmap: {
nullColor: '#3bd268',
tooltip: {
valueDecimals: 2,
},
},
}
http://jsfiddle.net/548DQ/
You can return the tooltip down to say 2 decimal points as such:
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value.toFixed(2) + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
}
As for your data, I would perhaps assign the data to variable first and then iterate over it detecting if it is a string. Then you can assign a null to it to make it work correctly.
You could also in this instance fix the decimals if you so wished.
myData = [
[0, 0, 10.873453],
[0, 1, "aa"],
[0, 2, 8],
[0, 3, 24],
[0, 4, 67],
[1, 0, 92],
[1, 1, 58] .....
................
for (var key in myData) {
if (myData.hasOwnProperty(key)) {
if(typeof (myData[key][2]) == 'string')
myData[key][2] = null;
}
}
......
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: myData, // <-- Add myData here
dataLabels: {
enabled: true,
color: 'black',
style: {
textShadow: 'none',
HcTextStroke: null
}
}
}]
Demo: http://jsfiddle.net/robschmuecker/548DQ/1/
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 '';
}
}