I'm using Grouped by column highcharts. ex:
https://jsfiddle.net/2bvudw1m/
Is there a way where I can show datalabels representing the y count(at the top of the column series) and the dataLabel name(at the bottom) for a column?
For example: this is my series data:
series: [{
name: 'active',
data: [53, 33, 43, 63, 7, 83],
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.name;
}
}
}, {
name: 'new',
data: [33, 43, 43, 63, 73, 8],
}]
i want to show 2 things:
count representing every serie
DataLabel of that serie
So far I have this:
$(function() {
$('#container').highcharts({
chart: {
type: 'column',
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Apples2', 'Oranges2','Apples3', 'Apple33'],
offset: 30
},
yAxis: {
allowDecimals: false,
//offset:10,
title: {
text: 'Number of fruits'
},
stackLabels: {
enabled: true,
verticalAlign: 'top',
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function() {
return this.y;
}
}
},
column: {
stacking: ''
},
},
series: [{
name: 'active',
data: [53, 33, 43, 63, 7, 83],
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.name;
}
}
}, {
name: 'new',
data: [33, 43, 43, 63, 73, 8],
}
]
});
});
https://jsfiddle.net/nec89t56/2/
however this does not work as when I try to add both the values it either adds the y count or the name. Is there a way to add both when the column is grouped: true and stacking: ""
Note: I cannot do stacking as "normal" as then it'll stack and not group, which is not what I want.
any ideas?
You can add multiple dataLabels by defining dataLabels as an array of objects where each object is a separate config for each data label.
Demo: https://jsfiddle.net/BlackLabel/op4ehx8m/
plotOptions: {
series: {
dataLabels: [{
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.name;
}
}, {
enabled: true
}]
},
column: {
stacking: ''
},
},
Related
Below is a piece of code that I have, which gives me an output like in the image.
I want the yaxis values to be sorted in the reverse order ie, the top of the Y axis should start from 9 and then 3,0. I tried reversed:true. But it doesn't seems to be working when tickPositions are used. But I need to use them as I have to show the bar at specific points. Is there any way to show the yaxis values in descending order along with tickPositions? Any help would be much appreciated. Thanks in advance.
Highcharts.chart('container', {
chart: {
type: 'bar',
//marginLeft: 150
},
xAxis: {
type: 'category',
title: {
text: null
},
max: 25,
min: 0,
reversed:true,
tickPositions : [9,3,0]
//tickLength: 1
},
yAxis: {
// min: 0,
// max: 10,
title: {
text: 'Votes',
align: 'high'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Votes',
data: [
[0, 10],
[3, 10],
[9, 10],
],
dataLabels: {
//enabled: true,
color: '#333',
//inside: true
}
}]
});
So, you just want it to show as normal with 0 at the coordiante root? No reversed needed?
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'bar',
//marginLeft: 150
},
xAxis: {
type: 'category',
title: {
text: null
},
max: 25,
//min: 0,
reversed:false,
tickPositions : [9,3,0]
//tickLength: 1
},
yAxis: {
reversed: false,
min: 0,
max: 10,
title: {
text: 'Votes',
align: 'high'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Votes',
data: [
[0, 10],
[3, 10],
[9, 10],
],
dataLabels: {
//enabled: true,
color: '#333',
//inside: true
}
}]
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
I'm using React Js highcharts and I want to be able to display labels below my series value
Something like below but WITHOUT STACKING. I want them to be grouped like shown in fiddle below
I have got to working up to this:
https://jsfiddle.net/fp6ue5ox/
I want to display labels:
Active, confirmed, new
I tried adding the stackLabels, but it does still show up
chart: {
type: 'column',
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges'],
offset: 30
},
yAxis: {
allowDecimals: false,
//offset:10,
title: {
text: 'Number of fruits'
},
stackLabels: {
enabled: true,
verticalAlign: 'top',
}
},
plotOptions: {
column: {
stacking: ''
},
},
series: [ {
name: 'new',
data: [33, 99, 88, 34, 73, 88],
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.stack;
}
}
},{
name: 'reopened',
data: [42, 54, 43, 62, 74, 84],
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.stack;
}
}
}, {
name: 'active',
data: [34, 40, 42, 36, 74, 83],
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.stack;
}
}
}]
});
Any idea anyone?
Thanks
Please analyze this demo: https://jsfiddle.net/BlackLabel/2ouLy1vj/
In the formatter callback, you can set wanted format to display as a dataLabel.
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
//y: 20,
formatter() {
return this.series.name;
}
}
Also, I copied the logic from your previous question: how to determine the width of every column series present in the chart- highhcarts
I am using high-charts to render a stacked grouped high-charts as below.
https://jsfiddle.net/4tojbfsq/1/
I'm able to get the total count of all the datalabels at the top and I also want to render a stack label on the x axis like a dual x-axis as shown in the above fiddle
however my problem is I'm able to show the stacklabels on x-axis however I also see the same stack label duplicated for every stacked series.
is there any way I can just show the stack label at the bottom of the all the series and not repeat anywhere inside the stacked series.
code:
yAxis: {
allowDecimals: false,
//offset:10,
title: {
text: 'Number of fruits'
},
stackLabels: {
enabled: true,
verticalAlign: 'top',
formatter: function() {
return this.total;
},
}
},
plotOptions: {
column: {
stacking: 'normal'
},
series: {
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.stack;
}
}
}
},
series: [{
name: 'John',
data: [53, 33, 43,63,7,83],
stack: 'malssses'
}, {
name: 'Joe',
data: [33, 43,43,63,73,8],
stack: 'female'
}, {
name: 'Jane',
data: [42, 54,43,62,74,84],
stack: 'malssses',
}, {
name: 'Janet',
data: [34, 40, 42,36,74,83],
stack: 'female',
}]
The duplicate labels are not a stacklabels, but the dataLabels. You can display the dataLabels only for the particular series:
{
name: 'Jane',
data: [42, 54, 43, 62, 74, 84],
stack: 'malssses',
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.stack;
}
}
}, {
name: 'Janet',
data: [34, 40, 42, 36, 74, 83],
stack: 'female',
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.stack;
}
}
}
Demo: https://jsfiddle.net/BlackLabel/t3sheqbu/
API: https://api.highcharts.com/highcharts/series.line.dataLabels
I have created one highchart in jsfiddle
Highcharts.chart('container', {
chart: {
type: 'areaspline',
},
title: {
text: 'Soverign Capped 1 year PD',
align: 'left',
backgroundColor: 'gray',
style: {
fontSize: "12px",
}
},
subtitle: {
text: '30 days moving average',
align: 'left',
style: {
color: 'gray',
fontSize: "8px",
}
},
xAxis: {
categories: [
'10/11/2019',
'11/11/2019',
'12/11/2019',
'1/11/2020',
'2/11/2020',
'3/11/2020',
'4/11/2020'
],
min: 0.5,
max: 5.5,
startOnTick: false,
endOnTick: false
},
yAxis: {
title: {
text: 'PD%',
align: 'high',
fontWeight: 'bold'
},
max: 25,
startOnTick: false,
endOnTick: false
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: false
},
states: {
inactive: {
opacity: 1
}
},
dataLabels: {
enabled: true,
inside: true,
style: {
fontWeight: "bold",
},
formatter: function() {
if (this.x == "4/11/2020") {
return this.series.name;
}
}
}
},
enableMouseTracking: false,
tooltip: {
enabled: false
},
areaspline: {
fillOpacity: 1,
},
},
series: [{
color: '#fbb189',
name: 'Deitrioting',
showInLegend: false,
data: [25, 25, 25, 25, 25, 25, 25]
},
{
color: '#fff2d0',
name: 'Stable',
showInLegend: false,
data: [3, 4, 5, 5, 4, 10, 10]
}, {
color: '#c2e0b7',
name: 'Improving',
showInLegend: false,
data: [1, 3, 4, 3, 3, 5, 7]
},
{
name: '',
showInLegend: false,
type: 'spline',
data: [7.0, 6.9, 9.5, 12, 23, 4, 3]
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Currently, I have defined different colour for the different series. But for the last date, I want to set the red colour for all the series.
Can you help me with this?
Sample image attached below.
You can use zones:
plotOptions: {
...,
areaspline: {
...,
zones: [{
value: 5.5
}, {
color: 'red',
value: 6.5
}],
},
}
Live demo: https://jsfiddle.net/BlackLabel/m4u5zt8g/
API Reference: https://api.highcharts.com/highcharts/series.area.zones
I cant seem to fix the Y axis scales on my chart. My JSFiddle code is here.
As you hover over the lines, the value that pops up does not match the scales on the Y Axes (Example, when you put your cursor towards the center of the graph, the Black Line has the value of 60% but when you look at the Y axis scale, it says 200%).
How would I go about fixing the Y axes so they show the appropriate values? I'm trying to make it so Signal Strength shows 0%-100%, Main Power 0-24V and Temperature showing 30F-120F.
Code:
function createChart() {
Highcharts.stockChart('container', {
alignTicks: false,
rangeSelector: {
selected: 4
},
chart: {
renderTo: 'container',
height: 500,
alignTicks: false
},
yAxis: [{ // Primary yAxis
tickAmount: 8,
tickInterval: 1,
labels: {
format: '{value}°F',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: false
}, { // Secondary yAxis
tickAmount: 8,
tickInterval: 10,
title: {
text: 'Main Power',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} volts',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
tickAmount: 8,
gridLineWidth: 0,
title: {
text: 'Signal Strength',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true
},
series: [{
name: 'Main Power',
type: 'spline',
yAxis: 1,
data: [24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24],
tooltip: {
valueSuffix: ' V'
}
}, {
name: 'Signal Strength',
type: 'spline',
yAxis: 2,
data: [20, 30, 40, 50, 60, 60, 60, 60, 70, 76, 78, 80],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' %'
}
}, {
name: 'Temperature',
type: 'spline',
yAxis: 0,
data: [70, 70, 76, 75, 78, 72, 80, 73, 75, 78, 72, 73],
tooltip: {
valueSuffix: ' °F'
}
}]
});
Removed the "percent" in:
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},