We Keep Coding

Vue apexcharts Y-axis label hiding in horizontal barchart

I'm using apexcharts with vue (vue-apexcharts 1.6.1) and making horizontal barchart for UHD resolution. The apexcharts inner is overflowing the chart width which is 100%.
Here is the template code:
<template>
<div>
<apexchart height="820" type="bar" :options="options" :series="series"></apexchart>
</div>
</template>
And here is the chart options:
options() {
return {
chart: {
type: 'bar',
width: "100%",
height: 820,
toolbar: {
show: false
}
},
legend: {
show: false
},
xaxis: {
categories: this.categoryData,
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
show: false
}
},
yaxis: {
opposite: true,
labels: {
style: {
colors: ["#BEBFCB"],
fontSize: "40px"
}
}
},
fill: {
colors: ["#0E5CAD", "#EA5455", "#0396FF", "#7367F0", "#D939CD"],
type: "gradient",
gradient: {
shade: "light",
gradientToColors: [
"#79f1a4",
"#feb692",
"#abdcff",
"#ce9ffc",
"#f6ceec"
],
shadeIntensity: 1,
type: "diagonal1",
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100]
}
},
plotOptions: {
bar: {
horizontal: true,
distributed: true,
borderRadius: 10,
barHeight: "70%",
colors: {
ranges: [
{
from: 0,
to: 0,
color: "pink"
}
],
backgroundBarColors: "#272A52",
backgroundBarRadius: 10
}
}
},
dataLabels: {
enabled: false
},
tooltip: {
enabled: false
},
responsive: [
{
breakpoint: 3199,
options: {
chart: {
height: 300
},
yaxis: {
opposite: true,
labels: {
style: {
colors: ["#BEBFCB"],
fontsize: "14px"
}
}
},
plotOptions: {
bar: {
borderRadius: 4,
colors: {
backgroundBarRadius: 4
}
}
}
}
}
]
};
}
Here's the output of above code:
Output of above code
Output of above code with dev tools
Expected behavior:
Expected behavior design
How can I adjust the chart so that my site matches the design? Right now the font-size of label is 40px in UHD resolution.
Thanks
P.S. I'm not using flex in any ancestor elements.

I solved this issue by giving maxWidth to y-axis label and by manipulating my x-axis categories to be in multiline.
After fix image
yaxis: {
opposite: true,
labels: {
maxWidth: "auto",
style: {
colors: ["#BEBFCB"],
fontSize: "40px"
}
}
}

Apex Chart Line Graph not showing data label only on first month

For some reason, the data label isn't being displayed on my line graph by ApexChart.
Seems like the chart's JS is relatively simple:
var options = {
chart: {
height: 380,
type: 'line',
zoom: {
enabled: false
},
toolbar: {
show: false
},
dropShadow: {
enabled: true,
top: 10,
left: 0,
bottom: 0,
right: 0,
blur: 2,
color: '#45404a2e',
opacity: 0.35
},
},
colors: ['#1ecab8', '#56b9db', '#ffb66e', '#eb3131', '#373d3f'],
dataLabels: {
enabled: true,
},
stroke: {
width: [3, 3, 3, 3, 3],
curve: 'smooth'
},
series: [{
name: "Informational",
data: [5,10,15,20]
},
{
name: "Low",
data: [2,3,4,5]
},
{
name: "Medium",
data: [9,0,2,3]
},
{
name: "High",
data: [1,2,3,4]
},
{
name: "Critical",
data: [0,0,0,10]
}
],
title: {
text: 'Reported Findings',
align: 'left',
style: {
fontSize: "14px",
color: '#ffffff'
}
},
grid: {
row: {
colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.2
},
borderColor: '#f1f3fa'
},
markers: {
style: 'inverted',
size: 6
},
xaxis: {
categories: <%= raw #series_months %>,
axisBorder: {
show: true,
color: '#bec7e0',
},
axisTicks: {
show: true,
color: '#bec7e0',
},
},
yaxis: {
min: 0,
max: 50
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: -25,
offsetX: 5
},
responsive: [{
breakpoint: 600,
options: {
chart: {
toolbar: {
show: false
}
},
legend: {
show: false
},
}
}]
}
var chart = new ApexCharts(
document.querySelector("#<%= #chart_id %>"),
options
);
chart.render();
What am I missing that is causing this to not display correctly? It doesn't make sense because if I change one of the first arrays from a 9 to a 10, then it shows up just fine:

Fixed this by updating the apexchart version from 3.15.6 to 3.19.3

Angular: want to display names inside the bars of a chart

Im using chartjs to display some data. Im trying to dynamically add data to datasets array but its not working.
Using additional plugins :-- Legend() Plugin
this.chart = new Charts ('LineChart',
{
type: 'bar',
data: {
labels: this.graphdates,
// data : this.graphname,
datasets: [
{
label: 'prizemoney',
data: this.graphprize,
backgroundColor: "#0000FF",
value : this.grpdata,
},
{
label: 'Bid Amount',
data: this.graphbid,
backgroundColor: "#FF1493",
},
],
plugins: [
Chartist.plugins.legend()
]
},
options: {
animation: {
duration: 10,
},
plugins: [ legend() ],
legend: {
labels: {
// This more specific font property overrides the global property
fontColor: 'black',
series : this.graphname,
}
},
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'label',
backgroundColor: '#FFF',
titleFontSize: 16,
titleFontColor: '#0066ff',
bodyFontColor: '#000',
bodyFontSize: 14,
displayColors: false
},
scales: {
xAxes: [{
stacked: true,
barPercentage: 0.6,
gridLines: { display: false },
ticks: {
fontSize: 15
},
scaleLabel: {
display: true,
labelString: 'Auction Date',
fontSize: 25,
fontStyle: "bold",
},
}],
yAxes: [{
stacked: true,
ticks: {
fontSize: 15
},
scaleLabel: {
display: true,
labelString: 'Amount',
fontSize: 25,
fontStyle: "bold",
}
}],
},
legend: {display: true}
}
});
Want to display the some data in the bars i.e. on Y-axis.

Chartjs with multiple y axes and different scales

How can I use different scales in Y Axes with ChartJs?
I have this datasets:
[ 1450478,2645844,1840524,640057,1145844,1530500,1695844,1778654,1450478,1645844,1450478,1645844 ]
[ 3.14, 4.15, 3.09, 3.48, 4.05, 3.99, 4.39, 4.15, 4.10, 3.98, 3.54, 3.50 ]
https://jsfiddle.net/psycocandy/ad18Lc4u/18/
The smallest scale represented by the line is obviously very close to the scale of 0. How do I make this same line visible without having to filter by legend?

I found the problem, updated fiddle: https://jsfiddle.net/psycocandy/fwncq25a/14/
To set the correspondent ID in the dataset with the yAxes, the correct way is to use yAxisID:
var chartData = [
[1450478, 2645844, 1840524, 640057, 1145844, 1530500, 1695844, 1778654, 1450478, 1645844, 1450478, 1645844],
[3.14, 4.15, 3.09, 3.48, 4.05, 3.99, 4.39, 4.15, 4.10, 3.98, 3.54, 3.50]
];
var dataSet = {
labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
],
datasets: [{
type: 'line',
label: 'Preço Médio Mensal',
yAxisID: 'y-axis-0',
borderColor: '#17522f',
fill: false,
backgroundColor: '#17522f',
borderWidth: 3,
radius: 4,
hoverBorderWidth: 4,
rotate: 90,
data: chartData[1],
datalabels: {
display: true,
align: 'end',
anchor: 'end',
rotation: -90,
clamp: true,
clip: true,
color: '#17522f',
padding: 10,
formatter: function (value, context) {
return numeral(value).format('0,0.00');
},
font: {
weight: 'bold',
}
}
},{
type: 'bar',
label: 'Total Mensal',
yAxisID: 'y-axis-1',
backgroundColor: '#7579ef',
borderColor: '#171951',
borderWidth: 2,
data: chartData[0],
datalabels: {
display: true,
clamp: true,
anchor: 'start',
align: 'end',
offset: 10,
rotation: -90,
color: '#171951',
formatter: function (value, context) {
return numeral(value).format('0,0');
},
font: {
weight: 'bold',
}
}
}]
};
var chart = new Chart(document.getElementById('myChart'), {
type: 'bar',
data: dataSet,
options: {
title: {
display: false
},
tooltips: {
mode: 'label',
callbacks: {
label: function(tooltipItem, data) {
var value = parseFloat(tooltipItem.value);
var formatedValue;
if(tooltipItem.datasetIndex > 0){
formatedValue = numeral(value).format('$ 0,0.00');
}else{
formatedValue = numeral(value).format('$ 0,0.00');
}
return ' ' + formatedValue;
},
}
},
responsive: true,
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
position: 'left',
type: 'linear',
scaleLabel: {
display: true,
},
id: 'y-axis-1',
ticks: {
beginAtZero:true,
callback: function (tick, index, ticks) {
return numeral(tick).format('(0,0)');
},
}
}, {
stacked: false,
position: 'right',
type: 'linear',
id: 'y-axis-0',
ticks: {
max: 10,
stepSize: 1,
display: true,
beginAtZero: true,
fontSize: 13,
padding: 10,
callback: function (tick, index, ticks) {
return numeral(tick).format('$ 0,0');
}
}
}]
}
}
});

In Chart.js 3, the syntax is slightly different. The axes are identified by their scaleId:
Namespace: options.scales[scaleId]
datasets: [
{
type: 'line',
yAxisID: 'y1',
},
{
type: 'line',
yAxisID: 'y2',
}
]
scales: {
x: {
stacked: false,
y1: {
position: 'left',
stacked: false,
},
y2: {
position: 'right',
stacked: false,
},
}
See the Charts.js axes documentation for more.

how to fix xaxis label on Flot js

I'm using 'Categories' mode to display labels. It works fine with small number of datas on graph but when I have more than 100 of datas there is no way to see the labels. Is there any solution for flot js ?
Graph with more datas will be like :
Below is the options I'm using to display the graph :
var stackOptionSeries = { stack: true, bars: { show: true, barWidth: 0.4, align: 'center',lineWidth: 1.5, fillColor: { colors: [ { opacity: 0.9 }, { opacity: 0.8 } ] } } };
var options = {
grid:{ hoverable: true,
clickable: true,
autoHighlight:true,
backgroundColor: 'white',
borderWidth:1,
borderColor:"rgba(0,0,0,0.1)",
tickColor:'#FAFAFA'},
series: stackOptionSeries,
legend: {
show: true,
position: "ne",
noColumns: 1
},
xaxis: {
mode: "categories",
tickLength: 0,
panRange: [-0.2, maxXaxisRange+0.2]
},
yaxes: [{ min: 0,ticks:7, panRange: [0,null], zoomRange: false }, {
position: "right",
autoscaleMargin: 1,
ticks:4,
min: 0,
max: 100,
panRange: [0,null],
zoomRange: false
}],
pan: {
interactive: true,
frameRate: 80
},
tooltip: true,
tooltipOpts: {
content: "%y %s, %x", // show percentages, rounding to 2 decimal places
shifts: {
x: 10,
y: 10
},
defaultTheme: false
}
};

Hei
How about using angled labels? then the labels should not show on top of each other.
xaxis: {
labelAngle: 45}
http://jsfiddle.net/manishsp2008/vNSD8/
Hope it helps