Chart JS tooltip labels spaced as spaceBetween - javascript

I have a stacked bar chart where the tooltip shows Label: $value & I would like this to be set as space-between so Label is aligned to the left & $value is aligned to the right, allowing all the numerical values to align. For example:
Label 1: $10,000
Label 2: $50,000
Label 3: $100,000
Here is the calculator. Just press the compound button to show the chart.
https://youthful-euclid-784d05.netlify.app
ChartJS options:
// Configuration options go here
options: {
responsive: true,
maintainAspectRatio: true,
legend: {
display: true,
position: "bottom"
},
scales: {
xAxes: [{
ticks: {
fontSize: 16,
fontFamily: "Roboto Condensed"
},
gridLines: {
display: false,
},
scaleLabel: {
display: true,
labelString: 'Year',
fontSize: 16,
fontFamily: "Roboto Condensed"
},
stacked: true,
}],
yAxes: [{
stacked: true,
ticks: {
maxTicksLimit: 5,
beginAtZero: true,
fontSize: 12,
fontFamily: "Roboto Condensed",
callback: function (value, index, values) {
if (parseInt(value) >= 1000) {
return (
numeral(value).format("$0a")
// "$" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
);
} else {
// return "$" + value;
}
},
},
}, ],
},
legend: {
display: true,
labels : {
fontSize: 14,
fontFamily: "Roboto Condensed",
},
},
chart: {
},
tooltips: {
// displayColors: false,
yAlign: "bottom",
callbacks: {
title: function (tooltip, data) {
return `After ${tooltip[0].label} Years`;
},
label: function(tooltipItems, data) {
return ` ${data.datasets[tooltipItems.datasetIndex].label}: ${formatCurrency(tooltipItems.value)}`;
},
},
// bodyAlign: "center",
titleFontSize: 15,
titleMarginBottom: 10,
bodySpacing: 10,
bodyFontSize: 12,
mode: "x",
xPadding: 10,
yPadding: 10,
// bodySpacing: "5"
},
}

Related

How to add percentage in polar chartjs vuejs

i want to show the percentage at the chart, i tried to use tooltips but it's not working.
i'm using vue 2
polar chart
the code:
Codesandbox
polarChart: { options: { responsive: true, maintainAspectRatio: false, responsiveAnimationDuration: 500, yaxis: { show: true,
},
legend: { position: 'right', labels: { padding: 25, boxWidth: 10, showActualPercentages: true, fontSize: 15,
},
}, tooltips: { callbacks: { shadowOffsetX: 1, shadowOffsetY: 1, shadowBlur: 8,
},
}, scale: { scaleShowLine: true, scaleLineWidth: 1, ticks: { display: false,
}, reverse: false, gridLines: { display: false,
},
}, animation: { animateRotate: false,
},
},
chartData: { labels: ['Africa', 'Asia', 'Europe'],
The data -----
datasets: [
{ label: 'Population (millions)', ba
ckgroundColor: [
'#836AF9',
'#ffe800',
'#28dac6',
'#ffe802',
'#FDAC34',
'#299AFF',
'#4F5D70',
'#2c9aff',
'#84D0FF',
'#EDF1F4',
], data: [3141, 3132, 2112],
borderWidth: 0,
},
],
},
i tried to use tooltips but it does not working.
i want that the chart show the percentage and the value.

Skip dates with no values in chart js

I would like to exclude the dates on the x-axis that has no values. Below is the image of my chart.
What my chart currently looks like
Here is also my current code for the options in chart js
var options = {
responsive: true,
maintainAspectRatio: false,
elements: {
line: {
fill: false
}
},
style: {
strokewidth: 10
},
title: {
display: true,
position: 'top',
fontSize: 18,
padding: 20
},
scales: {
xAxes:[{
ticks: {
z: 0,
autoskip: false,
callback: function(value, index, values){
return new moment(value).format('L');
}
},
type: 'time',
time: {
unit: 'week'
},
scaleLabel: { display: true,
labelString: 'Date'}
}],
yAxes: [{
ticks: { beginAtZero:true ,
min: 0,
max: 5 } ,
scaleLabel: { display: true,
labelString: 'Skill Rating'}
}]
}
};
I hope you guys can help me. Thanks!
When you pass your series/data to your chart, filter it
let data = [...];
data = data.filter(v => v[0] && v[1]);

Issues with ApexChart.js

I have 3 issues Please refer to this codepen and this picture
I try to disable mouse-hover behavior for donut chart by using config, following this #issue322 but it's not working. Hover still working whenever mouse on top of something
How to make labels at the center to fit in white space only? not overlapping with the graph? I try to use \n and <br> but still can't make it as 2 lines. \n only turn into white space.
How to limit data label percentage to no decimal?
Is it possible to put datalabel on the right of its segment?
<body>
<div id="chart"></div>
<script>
var options = {
series: [44, 55, 41, 17, 15],
chart: {
type: "donut",
},
dataLabels: {
enabled: true,
formatter: function (val, opts) {
return opts.w.config.series[opts.seriesIndex] + " : " + val;
},
},
plotOptions: {
pie: {
startAngle: 0,
expandOnClick: true,
offsetX: 0,
offsetY: 0,
customScale: 1,
dataLabels: {
offset: 0,
minAngleToShowLabel: 10,
},
donut: {
size: "65%",
background: "transparent",
labels: {
show: true,
name: {
show: true,
fontSize: "22px",
fontFamily: "Helvetica, Arial, sans-serif",
fontWeight: 600,
color: undefined,
offsetY: -10,
formatter: function (val) {
return val;
},
},
value: {
show: true,
fontSize: "16px",
fontFamily: "Helvetica, Arial, sans-serif",
fontWeight: 400,
color: undefined,
offsetY: 16,
formatter: function (val) {
return val;
},
},
total: {
show: true,
showAlways: false,
label: "Total Accumulated Mandate",
fontSize: "22px",
fontFamily: "Helvetica, Arial, sans-serif",
fontWeight: 600,
color: "#373d3f",
formatter: function (w) {
return w.globals.seriesTotals.reduce((a, b) => {
return a + b;
}, 0);
},
},
},
},
},
},
legend: {
show: false,
},
// responsive: [{
// enabled: false,
// breakpoint: 980,
// options: {
// chart: {
// width: 500
// },
// legend: {
// show: false
// }
// }
// }]
states: {
hover: {
filter: {
type: "none",
},
},
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</body>
For no 3, just simply use parseInt(val)
I have solved three issues other than first one: Try this code
var options = {
series: [44, 55, 41, 17, 15],
chart: {
type: "donut",
},
dataLabels: {
enabled: true,
formatter: function (val, opts) {
/* Format labels here */
return opts.w.config.series[opts.seriesIndex];
},
},
plotOptions: {
pie: {
startAngle: 0,
expandOnClick: true,
offsetX: 0,
offsetY: 0,
customScale: 1,
dataLabels: {
offset: 0,
minAngleToShowLabel: 10,
},
donut: {
size: "65%",
background: "transparent",
labels: {
show: true,
name: {
show: true,
fontSize: "16px",
fontFamily: "Helvetica, Arial, sans-serif",
color: undefined,
offsetY: 0,
formatter: function (val) {
return val;
},
},
value: {
show: true,
fontSize: "16px",
fontFamily: "Helvetica, Arial, sans-serif",
fontWeight: 400,
color: undefined,
offsetY: 16,
formatter: function (val) {
return val
},
},
total: {
show: true,
showAlways: false,
label: "Total Accumulated Mandate",
/* Set fontsize here and accordingly for responsiveness */
fontSize: "16px",
fontFamily: "Helvetica, Arial, sans-serif",
fontWeight: 600,
color: "#373d3f",
formatter: function (w) {
return w.globals.seriesTotals.reduce((a, b) => {
return a + b;
}, 0);
},
},
},
},
},
},
legend: {
show: true
},
// responsive: [{
// enabled: false,
// breakpoint: 980,
// options: {
// chart: {
// width: 500
// },
// legend: {
// show: false
// }
// }
// }]
states: {
hover: {
filter: {
type: "none",
},
},
},
};

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.

Categories