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
Related
I have been trying to sum the columns, but also show the the data between the columns.
I've been looking for documentation but haven't found it. I do not know if it is the correct place where I ask the question
Used the option dataLabels.
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%";
},
offsetY: -20,
style: {
fontSize: '12px',
colors: ["#304758"]
}
},
var options = {
series: [{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43]
}, {
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
plotOptions: {
bar: {
horizontal: false,
borderRadius: 10
},
},
xaxis: {
type: 'datetime',
categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT',
'01/05/2011 GMT', '01/06/2011 GMT'
],
},
legend: {
position: 'right',
offsetY: 40
},
fill: {
opacity: 1
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
However, this just shows the sum of each column.
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: ''
},
},
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 want to achieve something like this.
this is what I have so far:
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Browser market share, January, 2018'
},
subtitle: {
text: `<div>80%</div> of Total`,
align: "center",
verticalAlign: "middle",
style: {
"fontSize": "7px",
"textAlign": "center"
},
x: 0,
y: -2,
useHTML: true
},
plotOptions: {
pie: {
shadow: false,
center: ["50%", "50%"],
dataLabels: {
enabled: false
},
states: {
hover: {
enabled: false
}
},
size: "45%",
innerSize: "95%",
borderColor: null,
borderWidth: 8
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
y: 80,
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, "#000"],
[1, "#b0bfc6"]
]
},
name: "Speed"
},
{
y: 20,
color: "#000",
name: "Non Prioritised"
}],
});
here is the fiddle:
https://jsfiddle.net/gm8krq9L/
however I'm not able to get the different colors to show the progress effect on the chart. I see that there is a type called: chart: solidgauge, however my app does not support as I'll have to include the solidgauge file to load this kind of chart. Is there a way I can achieve this with chart type as pie?
thanks
What you want is called a donut chart. I already made an example for a such chart, is it something like this example you want?
Anyway, here's a working example with your fiddle.
The data is like the one you used:
series: [{
innerSize: '80%',
data: [{
name: 'Speed',
y: 80,
color: '#e7eaeb'
}, {
name: 'Non Prioritised',
y: 20,
}]
}],
Yes, you can create that type of chart by using pie series type, for example:
series: [{
type: 'pie',
enableMouseTracking: false,
innerSize: '80%',
dataLabels: {
enabled: false
},
data: [{
y: 10
}, {
y: 90,
color: '#e3e3e3'
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4791/
API Refernece: https://api.highcharts.com/highcharts/series.pie.innerSize