Iam using Apexchart, If I gave offset value as -30 , which means above the bar. It works fine, until I have the value of 100%. If I have 100% value, data labels touches the bar.
I don't want the datalabels to touch the bar, it should always be above the bar.
chart: {
type: 'column',
background: 'transparent',
toolbar: {
show: false
}
},
colors: [
function ({ value }) {
if (value >= minimumProfilePercentage) {
return theme.palette.warning.main;
}
return theme.palette.info.main;
}
],
xaxis: {
categories: ["A","B","C","D","E","F"],
axisBorder: {
show: false
},
grid: {
show: false
},
plotOptions: {
bar: {
columnWidth: '35%',
dataLabels: {
orientation: 'horizontal',
position: 'top'
}
}
},
tooltip: {
enabled: false
},
dataLabels: {
style: {
colors: [theme.palette.text.primary]
},
formatter(value) {
return `${value}%`;
},
offsetY: -30
},
annotations: {
yaxis: [
{
strokeDashArray: 5,
}
]
}
};
const chartSeries = [
{
data: [100, 20, 30, 40, 50, 60, 97]
}
];
Ran into the same issue. For now I customized the y axis, showing 1 tick more.
In my case:
yaxis: {
tickAmount: 5,
min: 0,
max: 100
}
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>
Question is related to this one.
Problem : Currently I have chart with 2 series - one serie with positive and one with negative values. By default each serie has dynamic scaling but they are not relating (I mean if 20 for first serie is MAX value and 5 for second serie is MAX, then it looks on graph like the same). When I set max and min values to yAxis, it solve problem, but adds to much empty space, that for some cases column is too small. Can I update chart setting to have dynamic scalling but one for both series?
Here is my example with setted MAX and MIN values for yAxis http://jsfiddle.net/futw5e8k/6/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: null
},
xAxis: {
categories: ['13-17', '18-24', '25-34', '35-44', '45-54', '55-64', '65+'],
offset: -150,
lineWidth: 0,
tickWidth: 0
},
yAxis: [{
title: {
text: null,
},
top: 50,
height: 124,
min: 0,
max: 100,
gridLineColor: 'transparent',
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
}
},{
title: {
text: null
},
top: 200,
height: 150,
offset: 0,
min: -100,
max: 0,
gridLineColor: 'transparent',
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
}
}],
plotOptions: {
column: {
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
formatter: function() {
return Math.abs(this.y);
}
}
}
},
tooltip: {
formatter: function() {
return this.x + '<br/>' + this.series.name + ': ' + Math.abs(this.y);
}
},
series: [{
name: 'John',
data: [1, 13, 20, 19, 15, 7, 2]
}, {
name: 'Joe',
yAxis: 1,
data: [-0.35, -6, -9, -16, -3, -1.5, -0.25]
}]
});
On load event you can find the maximum of your data and dynamically update axes' max - see Axis.update().
chart: {
type: 'column',
events: {
load: function() {
const max = Math.max(this.series[0].dataMax, this.series[1].dataMax);
this.yAxis[0].update({
max: max,
}, false);
this.yAxis[1].update({
max: max,
top: 130
}, false);
this.redraw(false);
}
}
},
example: http://jsfiddle.net/futw5e8k/7/
I have a requirement to display completion percentage on a bar chart with the start date for each of those project as line chart.
Now, for achieving this I have created a chart with dual y-axis.
1 - axis-1 shows progress with bar-chart. With max: 100 - avoid displaying values > 100.
2 - axis-2 shows start dates with a line chart
With this set up, I expect the bar to go all the way to the end when value is 100 and the secondary axis to adjust with in it. Instead the bar stops at about 3/4 of the way and line chart actually plots point beyond bar chart's 100%.
Following jsfiddle would display the prominently.
var completionChart = $('#Chart').highcharts({
title: {
text: 'Project QUAL Status - SD/uSD'
},
xAxis: {
categories: window.xCategories,
crosshair: true
},
yAxis: [{
title: {
text: '% Completion'
},
min: 0,
max: 100,
labels: {
enabled: false
},
gridLineWidth: 0
}, {
"title": {
"text": "Start Date"
},
type: 'datetime',
opposite: true
}],
tooltip: {
backgroundColor: 'rgba(255,255,255,1)',
borderRadius: 10,
borderWidth: 1,
borderColor: '#000000',
useHTML: true,
positioner: function () {
return { y: 317 };
},
shared: false,
style: {
padding: 5
}
},
plotOptions: {
bar: {
groupPadding: 0
},
series: {
dataLabels: {
enabled: true,
align: 'left',
overflow: 'none',
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function () {
if (this.y <= 100)
return Math.round(this.y) + '%';
}
},
cursor: 'pointer'
}
},
credits: {
enabled: false
},
series: [{
index: 0,
name: 'Completion %',
data: completionpercent,
showInLegend: false,
type: 'bar'
}, {
data: startDate,
type: 'spline',
name: 'Start Date',
connectNulls: true,
color: '#2F4367',
lineWidth: 3,
yAxis: 1,
index: 1,
}]
});
The width of the chart is set and I can not change it without affecting the overall design of the application. Changing the width does help sometimes, but I want a solution that does not depend on the chart width to work.
You need to set the alignTicks property to false in order to achieve this.
Updated fiddle:
https://jsfiddle.net/jlbriggs/mup6vL8d/2/
Reference:
http://api.highcharts.com/highcharts/chart.alignTicks
Below is a bar graph where the green bars never go over 100 and the red bars never go below -100.
However in the graph's yAxis you can see -150%.
I found this fix here, however it did not work. yAxis: {min: 0, max: 100}
Is there another way to accomplish this?
Here is the area where I add those bar graphs
function addSentimentSeries(name, data) {
var index = findTheIndex(name);
var color = name === 'Positive sentiment' ? '#009900' : '#FF0000';
if (index) {
chart.series[index].update({
showInLegend: false,
yAxis: 2,
type: 'column',
name: name,
color: color,
data: data,
dataGrouping: { enabled: false }
}, true);
} else {
chart.addSeries({
showInLegend: false,
yAxis: 2,
type: 'column',
name: name,
color: color,
data: data,
dataGrouping: { enabled: false }
}, true);
}
chart.hideLoading();
chart.redraw();
}
This is the 'fix' I implemented from the answer I found above, it did not do anything, my bar graphs still display -150%
vm.config.yAxis.push({
height: '30%',
top: '70%',
gridLineWidth: 0,
title: {
text: 'Sentiment',
style: { color: '#BFBFBF' }
},
yAxis: { min: 0, max: 100 },
offset: 0,
labels: {
formatter: function() {
return this.value + '%';
},
style: { color: '#BFBFBF' }
},
opposite: false
});
You should set the minPadding and maxPadding parameters as 0, then you reduce the spacing on a axis.
yAxis: {
minPadding: 0,
maxPadding: 0
}