I would like to display labels on each stacked bar like blue on blue bar, yellow on yellow bar and so on.
Here's my code in JSFiddle:
[1]:http://jsfiddle.net/Sa_2019/n7r57pv7/
Here is my Code :
<div id="placeholder" style="width:600px;height:300px;"></div>
var data = [
{label: 'foo', color:'red', data: [[1,300], [2,300], [3,300], [4,300], [5,300]]},
{label: 'bar', color:'blue', data: [[1,800], [2,600], [3,400], [4,200], [5,0]]},
{label: 'baz', color:'yellow', data: [[1,100], [2,200], [3,300], [4,400], [5,500]]},
];
$.plot($("#placeholder"), data, {
series: {
stack: 1,
bars: {
show: true,
lineWidth: 1,
barWidth: 0.8,
order: 1,
fill: true
},
yaxis : {
min : 0,
tickLength: 0
} ,
xaxis: {
tickLength: 0,
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Arial',
axisLabelPadding: 3,
color: "#838383",
timeformat: "%b/%y"
}
}
});
Any idea please.
Thank you
You can use dataLabels of Highcharts to solve this . the code will be like :-
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'white',
formatter: function () {
// return the value you want to show on labels.. depends on your data ...
console.log(this)
}
}
}
}
something like this you can refer to ...
As of know i have added string "random" to it just change that according to your logic ..
http://jsfiddle.net/n1mcs4d1/
Related
I have used horizontal bar chart from chart.js where i need percentage values to be shown next to each bar at right side? here is the bar sample image.
click here to view sample image of bar chart
Also these are the options i have tried :
xAxes: [
{
ticks: {
min: 0,
max: 100
},
grid: {
offset: false
}
},
],
yAxes: [
{
gridLines: {
display: false,
},
display: "right",
barPercentage: 0.8,
minBarLength: 2,
},
],
Is there any option which can turn the percentage values on at he right side of the horizontal bar chart?
Please click below image to see the expected output
click image expected output
You can make use of the datalabels plugin
Example:
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.3.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0-rc"></script>
<canvas id="myChart" width="850" height="520"></canvas>
<script>
var ctx = document.getElementById('myChart');
Chart.register(ChartDataLabels);
Chart.defaults.set('plugins.datalabels', {
color: '#FE777B'
});
var myChart = new Chart(ctx, {
type: 'bar',
plugins: [ChartDataLabels],
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
data: [12, 19, 3, 5, 2, 3],
label: 'Advisor Closed MTD',
backgroundColor: 'rgb(192,111,94)',
barThickness: 25,
datalabels: {
color: '#FFCE56'
}
}],
},
options: {
indexAxis: 'y',
responsive: false,
plugins: {
datalabels: {
formatter: (val, context) => (`${val}%`),
anchor: 'end',
align: 'end',
labels: {
value: {
color: 'blue'
}
}
}
}
}
});
</script>
I created the same apexchart with 2 different datasets. Chart 1 looks great with horizontal lines. But chart 2 has just 1 horizontal line.
The only difference between chart 1 and chart 2 is the dataset. How can I always display 5 horizontal lines across the chart?
Chart 1: https://codepen.io/dedefeefdef/pen/GRrzoNj
Dataset 1:
[[1619173193036,49407.535435718644],[1619176091510,49549.26563563993],[1619179037350,50138.28330288627],[1619182201670,49797.38039516057],[1619185113178,49034.01097606104],[1619188127394,49524.184512772634],[1619191189295,49576.50939492852],[1619194162163,50205.73169158809],[1619197144978,50073.48029019594],[1619200103693,50115.77589945983],[1619203154512,50596.642200351744],[1619206164399,50777.75836621535],[1619209161605,51428.66818308527],[1619212172077,50846.83181180289],[1619215102695,50443.96733946523],[1619218180736,50740.97575842062],[1619221165616,50847.88134692881],[1619224199653,50448.69953560474],[1619227160254,49943.27825537499],[1619230041721,49712.238215643156],[1619233139782,50144.43808207704],[1619236181862,50468.26366127149],[1619239136429,50360.42255156926],[1619242087409,50377.45754274844],[1619245135556,50531.35036881819],[1619248237594,50062.40313986315],[1619251214964,49907.96886371824],[1619254186363,50141.20384968558],[1619259102000,49412.67996377031]]
Chart 2 : https://codepen.io/dedefeefdef/pen/VwPgeKL
Dataset 2:
[[1619173150399,1.0940878381417847],[1619176129124,1.1070033240375783],[1619179360960,1.1335610023715914],[1619182375797,1.0987262566796245],[1619185499396,1.0694830118537217],[1619188437886,1.1112241146594293],[1619191471163,1.0877301924115799],[1619194426800,1.1078699893603736],[1619197429216,1.1017656067359929],[1619200387208,1.0989519988768361],[1619203420737,1.1129932263760143],[1619206362548,1.11105234071539],[1619209395648,1.1440514951415397],[1619212482497,1.1314118311313806],[1619215435039,1.1124574692062728],[1619218357604,1.1229133868529708],[1619221458977,1.1517979836016765],[1619224442891,1.1252054746610685],[1619227453005,1.1180402148239843],[1619230457650,1.1053157940491964],[1619233312657,1.1298614827999067],[1619236396985,1.1397639443740273],[1619239424178,1.1359274669865476],[1619242469061,1.140215819313516],[1619245387650,1.144685119290531],[1619248338390,1.1276405657214676],[1619251357302,1.1279390040404729],[1619254396800,1.1362663708234912],[1619259112000,1.1049392779824312]]
It is showing on both charts, only that on the second it is only showing one. This is because the tick amount of the y-axis is calculated automatically depending on the data, but you can set it using tickAmount:
yaxis: {
tickAmount: 5
}
let InfoinfoDisplay_color = "rgba(1, 100, 148, 0.95)";
let InfoHovercolor = "rgba(1, 100, 148, 0.95)";
var chartData = [
[1619172418188, 1.0476013869111795],
[1619175587292, 1.1198232589571675],
[1619178853930, 1.157646111247407],
[1619181915314, 1.1093982047739799],
[1619184749901, 1.0798464813053623],
[1619187818296, 1.1086855020268924],
[1619190782881, 1.096000360488148],
[1619193860463, 1.10672232619161],
[1619196767038, 1.0988803848560535],
[1619199743916, 1.0981656379540496],
[1619202862866, 1.093804129207881],
[1619205891702, 1.1077756492342723],
[1619208843234, 1.1481203368627158],
[1619211742488, 1.1172375471919378],
[1619214829414, 1.110618846651946],
[1619217810168, 1.1233988199629148],
[1619220788002, 1.1413939139175715],
[1619223899525, 1.1399773736160672],
[1619226882428, 1.1191436618449704],
[1619229755380, 1.12186472542115],
[1619232856982, 1.128074522521124],
[1619235801347, 1.1467409723241526],
[1619238745617, 1.1333216765168754],
[1619241860850, 1.141486724409456],
[1619244733747, 1.1459909043812324],
[1619247714927, 1.1413474565269073],
[1619250869567, 1.127054245243459],
[1619253888057, 1.1406556175192146],
[1619258468000, 1.1208390731103737]
];
var chartDisplay = new ApexCharts(document.querySelector("#coinDetailChart"), {
chart: {
type: 'area',
stacked: false,
height: 350,
zoom: {
type: 'x',
enabled: true,
autoScaleYaxis: true
},
toolbar: {
autoSelected: 'zoom'
},
},
dataLabels: {
enabled: false
},
markers: {
size: 0,
},
title: {
text: '<%=data[0].name%> Price Movement',
align: 'left',
style: {
color: 'white'
},
},
series: [{
name: "$ ",
data: chartData
}],
colors: [InfoinfoDisplay_color],
opacity: 1,
type: 'solid',
fill: {
colors: [InfoinfoDisplay_color],
type: 'gradient',
gradient: {
type: "vertical",
opacityFrom: 1,
opacityTo: 1,
gradientToColors: [InfoHovercolor],
stops: [25, 100]
}
},
yaxis: {
labels: {
style: {
colors: 'white',
},
show: true,
offsetX: 0,
offsetY: 0,
rotate: 0,
formatter: function(val) {
return (val.toFixed(3));
},
},
tickAmount: 5
},
xaxis: {
type: 'datetime',
crosshairs: {
width: 1
},
labels: {
style: {
colors: 'white',
},
},
},
});
chartDisplay.render();
* {
background: black
}
<head>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<div id="coinDetailChart"></div>
</body>
I created stacked column in Highchart.
I used pointWidth: 50 to reduce column bar width, but space between stacked bar is too big.
How to reduce space between stacked bar?
[Updated question]
I also want to display stack name in legend, and user can click to stack name to hide stack in chart. Is it posible?
Here my source code:
JSfiddle link https://jsfiddle.net/viethien/ak2h1sfq/4/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray'
}
}
},
legend: {
align: 'center',
x: 0,
verticalAlign: 'bottom',
y: 5,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || 'white',
borderColor: '#CCC',
borderWidth: 0,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
},
series: {
//stacking: 'normal',
dataLabels: {
formatter: function() {
console.log(this);
return this.series.name;
},
enabled: true,
//allowOverlap: true,
//align: 'right',
color: '#fff',
shadow: false,
//x:-50,
style: {
fontSize: "8px",
textShadow: "0px"
}
},
//pointPadding: 0.1,
pointWidth: 50,
groupPadding: 0,
stacking: 'normal',
//colorByPoint: true,
//showInLegend: false
}
},
series: [{
name: 'Component',
data: [[0,5], [1,3], [2,4], [3,7], [4,3]],
stack: 'Forecast'
}, {
name: 'Module',
data: [[0,2], [1,2], [2,3], [3,2], [4,2]],
stack: 'Forecast'
},
{
name: 'Board',
data: [3, 5, 5, 3, 2],
stack: 'Forecast'
},
{
name: 'Component',
data: [6, 4, 5, 8, 4],
stack: 'Real'
}, {
name: 'Module',
data: [3, 3, 4, 3, 3],
stack: 'Real'
},
{
name: 'Board',
data: [4, 6, 6, 4, 3],
stack: 'Real'
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
You can set the groupPadding to higher value, which moves the column together for the group. Be aware that using the fixed value for the pointWidth disturbs the chart responsivity, but you can customize those values for particular chart width using the responsive rules: https://api.highcharts.com/highcharts/responsive
Demo: https://jsfiddle.net/BlackLabel/we1rc5vg/
plotOptions: {
column: {
stacking: 'normal',
},
series: {
//stacking: 'normal',
dataLabels: {
formatter: function() {
console.log(this);
return this.series.name;
},
enabled: true,
//allowOverlap: true,
//align: 'right',
color: '#fff',
shadow: false,
//x:-50,
style: {
fontSize: "8px",
textShadow: "0px"
}
},
//pointPadding: 0,
pointWidth: 50,
groupPadding: 0.2,
stacking: 'normal',
//colorByPoint: true,
//showInLegend: false
}
},
API: https://api.highcharts.com/highcharts/series.column.groupPadding
EDIT:
To create a stack legend item you need to add a series without data (that creates the legend button) and customize button functionality using the legendItemClick callback.
Demo: https://jsfiddle.net/BlackLabel/qLs219u4/
Notice that this solution may not work perfectly when stack will be hidden and the user will click on a particular series legend item from the hidden stack.
Once I have worked on really complicated example of it. If you want to know you can explore this topic here: https://www.highcharts.com/forum/viewtopic.php?t=42157
I have two series of data in my highchart and want to use "minPointLength" for only one of them. Is this possible to set? My series contains only: name, color and data. My chartconfig looks like this:
const chartConfig = {
chart: {
type: 'column',
dashStyle: 'ShortDash',
},
title: {
text: '',
},
xAxis: {
padding: 0,
plotLines: [{
dashStyle: 'shortDash',
}],
},
yAxis: {
opposite: true,
title: {
text: '',
},
gridLineDashStyle: 'dash',
},
plotOptions: {
column: {
borderRadiusTopLeft: 32,
borderRadiusTopRight: 32,
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
},
enableMouseTracking: false,
},
series: {
pointWidth: 24,
minPointLength: 3,
},
},
};
What I want is to always show minimum height on one of the datasets. Even if the scale goes from 1 to 1 000 000, it supposed to be a little peak at the bottom if one of my columns shows 3 out of 1 000 000.
Yes, you can set a minPointLength property individually for each series:
series: [{
minPointLength: 80,
data: [...]
}, {
data: [...]
}]
Live demo: http://jsfiddle.net/BlackLabel/19nc8jv6/
API Reference: https://api.highcharts.com/highcharts/series.column.minPointLength
There is an overlapping issue when I tried to draw two yAxis.plotLines on column chart.
The label of plotLines has been covered/overlapped by columns.
Please see the screenshot as below
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy',
height: 400
},
title: {
text: null
},
xAxis: [{ // Suppier names xAxis
max: 9.3,
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
labels: {
rotation: -90,
}
}],
yAxis: [{ // Primary yAxis (Sales)
title: {
text: '<span class="axis-label">Sales Value (AED)</span>',
useHTML: true,
style: {
color: '#89A54E'
}
},
min: 0,
max: 190234
}, { // Secondary yAxis (Margin %)
title: {
text: '<span class="axis-label">Margin</span>',
useHTML: true
},
labels: {
format: '{value}%'
},
opposite: true,
min: 0,
max: 22,
alignTicks: false,
gridLineWidth: 0,
plotLines: [{
value: 11.66000,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: '11.66%',
align: 'right',
style: {
color: 'red'
}
}
}]
}],
tooltip: {
shared: true
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
pointWidth: 25
},
column: {
colorByPoint: true
},
line: {
dataLabels: {
enabled: true,
format: '{y}%',
style: {
fontWeight: 'bold',
color: '#000000',
}
//style: 'background-color:rgba(255,0,0,0.5);'
//backgroundColor: '#FEFEFE',
//shadow: true
}
}
},
series: [{
name: 'Sales Value',
color: '#FFA500',
type: 'column',
data: [104833.6400, 38023.0500, 53165.2200, 21674.0000, 37098.4700, 42679.6700, 23127.3300, 34588.5000, 33380.0000, 15453.0000],
tooltip: {
valuePrefix: 'AED'
}
}, {
name: 'Margin After Discount (%)',
color: 'lightblue',
yAxis: 1,
data: [12.10, 22.10, 9.40, 13.40, 10.90, 10.60, 9.70, 8.50, 8.00, 11.90],
tooltip: {
valueSuffix: '%'
}
}]
});
});
So, my question is, is there a way to allow overlapping in this case? However, I don't want to change the max value of xAxis.
Here is my testing link:testing link
Thanks
You need to add zIndex to plot lines like you did for the first line - Fiddle
It looks like you are using CSS properties in Javscript.
I am not familiar with the package you are using, but there is usually an 'opacity' property that can define the element's visibility.
For example,
Set the opacity of the red textbox to 0. This will make it invisible.
When you want to see it, set the opacity to 1.
The bars on top are automatically set to 1, because every element has opacity 1 by default.
plotLines: [{
value: 11.66000,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: '11.66%',
align: 'right',
style: {
color: 'red',
opacity: 0
}
}