I would like to center align the total (value 20/40) but without the label and also change the color. Unfortunately, only label can accept color but still it cant be vertically center aligned.
var options = {
series: [20,40],
plotOptions: {
pie: {
donut: {
labels: {
show: true,
total: {
show: true,
showAlways: true,
label: '',
formatter: function (w) {
return w.globals.seriesTotals.reduce((a, b) => {
return `${a}/${b}`
})
}
}
}
}
}
},
colors: ['#0065bd', '#dbecf8'],
chart: {
type: 'donut',
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
}
}
}]
}
var chart = new ApexCharts(
document.querySelector("#responsive-chart"),
options
);
chart.render();
#import url('https://fonts.googleapis.com/css?family=Poppins');
* {
font-family: 'Poppins', sans-serif;
}
#chart {
max-width: 260px;
margin: 35px auto;
opacity: 0.9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.35.3/apexcharts.min.js" integrity="sha512-yhdujT21BI/kqk9gcupTh4jMwqLhb+gc6Ytgs4cL0BJjXW+Jo9QyllqLbuluI0cBHqV4XsR7US3lemEGjogQ0w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="chart">
<div id="responsive-chart"></div>
</div>
You can center value by change offsetY in plotOptions. You can also change color there. https://apexcharts.com/docs/options/plotoptions/pie/#value
plotOptions: {
pie: {
donut: {
labels: {
show: true,
total: {...},
value:{
offsetY: -8, // -8 worked for me
color:'#ff00ff'
}
}
}
}
},
Thought I would answer my question how I managed to achieve this finally.
To apply font colour - Instead of
total: formatter function(w) {
}
I used label: property.
To position the text to center, I had to dig through the Apex charts code and found this code which is using name.OffsetY to position.
https://github.com/apexcharts/apexcharts.js/blob/main/src/charts/Pie.js
if (dataLabelsConfig.name.show) {
let elLabel = graphics.drawText({
x,
y: y + parseFloat(dataLabelsConfig.name.offsetY),
text: name,
textAnchor: 'middle',
foreColor: labelColor,
fontSize: labelFontSize,
fontWeight: labelFontWeight,
fontFamily: labelFontFamily
})
This is how my plotoptions looks like
plotOptions: {
pie: {
donut: {
labels: {
show: true,
name: {
offsetY: 10,
},
total: {
show: true,
showAlways: true,
fontSize: '22px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 600,
label: `${data[0]}/${data[1]}`,
color: '#0065bd',
formatter: function (w) {
return '';
}
}
}
}
}
},
Related
Could not find a simple example for this:
Trying to create a curved line in Chart.js and add fairly simple labels.
Got close but need some help as my JS is not my forte and the documentation is a bit confusing.
So, I have 1 line with 4 dots (x,y) and a second dataset with 1 dot:
<!DOCTYPE html>
<html>
<body>
<div>
<canvas id="linechart" width="500" height="500" style="display: block; box-sizing: border-box; height: 400px; width: 400px;"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.0.0/dist/chart.min.js"/>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0"/>
<script>
var linedata = {
datasets: [
{
data: [{x:70,y:50}]},
{
datasets: [{
// Change options only for labels of THIS DATASET
datalabels: {
color: 'yellow'
}
}],
data: [{
x: 0,
y: 90
}, {
x: 69,
y: 78
}, {
x: 150,
y: 55
}, {
x: 165,
y: 0
}
],
showLine: true,
fill: false,
lineTension: 0.4,
bezierCurve: true,
borderColor: 'rgba(10, 200, 40, 1)'
}
]
};
var chartOptions = {
plugins: {
datalabels: {
color: 'blue',
labels: {
title: {
font: {
weight: 'bold'
}
},
value: {
color: 'green'
}
}
}
},
animation: {
duration: 0
},
responsive: false,
maintainAspectRatio: true,
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
stepSize: 10,
max: 180
}
}],
yAxes: [{
ticks: {
stepSize: 10,
max: 100
}
}]
}
};
var lineID = document.getElementById('linechart').getContext('2d');
var lineChart = new Chart(lineID, {
type: 'scatter',
data: linedata,
options: chartOptions,
plugins:[ChartDataLabels]
});
</script>
</body>
</html>
What I need is the syntax to define each dot as 'predefined text'+value/
for example the second dot should say 'pressure: 65'.
I believe the answer is here:
https://chartjs-plugin-datalabels.netlify.app/guide/formatting.html#data-transformation
But my JS isn't good enough....
surly this will help
try using formatter function in datalabels
https://chartjs-plugin-datalabels.netlify.app/guide/formatting.html#custom-labels
below return statement will give you the label defined for the point, alter ot as you like
datalabels: {
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
}
}
this example below is the syntax you need
formatter: function(value, context) {
return context.dataIndex + ': ' + Math.round(value*100) + '%';
}
// label for data at index 0 with value 0.23: "0: 23%"
// label for data at index 1 with value 0.42: "1: 42%"
// ...
I tried adding padding above my graphs, but it did not work. I went to the options.layout.padding section of the graph. The data labels just sit on top of the bar and look really bad. So either a way to add padding above graph, or some way to fix the labels being on top of the bars would help. I am using the Chart js data labels plugin.
Javascript Code:
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<canvas id="myChart" class="bar-chart"></canvas>
<script>
Chart.register(ChartDataLabels); /* Register chart for data label plugin */
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Lithium Battery', 'Other Mfg', 'Delivery', 'Tailpipe', 'Fuel Cycle', 'Disposal', 'Total'],
value_labels: [ /* labels above the chart */
{{data['icev_lit_bat']}},
... (Ommited for space)
],
datasets: [{
label: 'ICEV CAR (MTCO2e/Year)',
data: [ /* errors are normal, fixes when server runs the code*/
[0, {{data['y1_icev']}}],
[{{data['y1_icev']}}, ... ommited for space
],
backgroundColor: [
'rgba(0,0,0,0.3)'
],
borderColor: [
'rgba(0,0,0,1)'
],
borderWidth: 1,
borderSkipped: false
}]
},
options: { /* Chart settings */
scales: {
y:{
ticks:{
font:{
size: 20
},
stepSize:0.5
},
max: 7,
min: 0,
stepSize: 1
},
x:{
ticks:{
font:{
size: 18
},
},
}
},
layout: {
padding: {
left: 0,
right: 0,
top: 30,
bottom: 0
}
},
responsive: false,
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
font: {
size: 20
}
}
},
datalabels: {
color: '#000',
anchor: 'end',
formatter: function(value, context) { /* sets custom labels */
return context.chart.data.value_labels[context.dataIndex];
}
}
},
y: {
beginAtZero: true
}
}
});
</script>
</div>
I figured it out. You need to use align: 'top'
plugins: {
legend: {
labels: {
font: {
size: 20
}
}
},
datalabels: {
color: '#000',
anchor: 'end',
align: 'top',
formatter: function(value, context) { /* sets custom labels */
return context.chart.data.value_labels[context.dataIndex];
}
}
},
I am attempting to create a donut chart in apex charts similar to the one shown below (right), I have gotten pretty close, however I need to have some stroke or padding around the series items along the plot of the donut chart as shown.
current configuration
const options = {
chart: {
type: 'donut',
height: 150,
width: '100%',
offsetX: 50
},
plotOptions: {
pie: {
startAngle: 10,
donut: {
size: '90%',
dataLabels: {
enabled: false
},
labels: {
show: true,
name: {
show: true,
offsetY: 38,
formatter: () => 'Completed'
},
value: {
show: true,
fontSize: '48px',
fontFamily: 'Open Sans',
fontWeight: 500,
color: '#ffffff',
offsetY: -10
},
total: {
show: true,
showAlways: true,
color: '#BCC1C8',
fontFamily: 'Open Sans',
fontWeight: 600,
formatter: (w) => {
const total = w.globals.seriesTotals.reduce(
(a, b) => a + b,
0
);
return `${total}%`;
}
}
}
}
},
},
dataLabels: {
enabled: false
},
labels: ['Completed', 'Cancelled', 'Pending', 'Failed'],
legend: {
show: false,
position: 'right',
offsetX: -30,
offsetY: 70,
formatter: (value, opts) => {
return value + ' - ' + opts.w.globals.series[opts.seriesIndex];
},
markers: {
onClick: undefined,
offsetX: 0,
offsetY: 25
}
},
fill: {
type: 'solid',
colors: ['#8BD742', '#BCC1C8', '#78AEFF', '#F74D52']
},
stroke: {
width: 0
},
colors: ['#8BD742', '#BCC1C8', '#78AEFF', '#F74D52']
};
Try setting the stroke width to greater than 0 and give the stroke same color as the background.
stroke: {
width: 4,
colors: ['#1E252A']
}
I need to get a chart like this and I have no idea how to get it.
I've tried with custom tooltips but I need show them all of them at the same time. I've tryed as well with chartjs-plugin-datalabels but the labels are inside the canvas and they appear cut.
Do I need to create a html tooltip for every data?
Any ideas?
Updated:
Here is my code:
options: {
responsive: true,
maintainAspectRatio: true,
legend: {
display: false
},
animation: {
animateScale: true,
animateRotate: true
},
cutoutPercentage: 60,
circumference: 2 * Math.PI,
showAllTooltips: true,
tooltips: {
enabled: false
},
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderColor: 'white',
borderRadius: 50,
borderWidth: 1,
anchor: 'end',
align: 'end',
color: 'white',
padding: 10,
font: {
weight: 'normal',
size: '10'
},
formatter: function(value, context) {
var percentageNum = context.chart.data.datasets[0].data[context.dataIndex]
return percentageNum + '\n %';
}
}
}
}
and this is what I get:
I am using High-charts to show pie charts, can any one tell me how can I remove this white border around the radius. My code is given below also the screen shot image of chart.
I have no lot of experience with high-charts if anyone know this please help me. The documentation is also very tough to read and understand
$(function () {
$('#cashflow_graph').highcharts({
chart: {
type: 'pie',
backgroundColor:'red',
},
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
shadow: false,
center: ['50%', '50%']
},
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
},
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
valueSuffix: '%'
},
series: [{
name: 'Cash Flow',
data: [
{
name: 'Incoming',
y: 40,
color: '#87b22e'
},
{
name: 'Outgoing',
y: 30,
color: 'black'
},
{
name: '',
y: 30,
color: 'white'
}
],
size: '80%',
innerSize: '80%',
dataLabels: {
enabled: false,
formatter: function () {
return false;
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>
<div id="cashflow_graph" style="height: 300px; width:100%;"></div>
You need to set the plotOptions.pie.borderWidth property to 0:
$(function() {
$('#cashflow_graph').highcharts({
chart: {
type: 'pie',
backgroundColor: 'red',
},
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
shadow: false,
center: ['50%', '50%'],
borderWidth: 0 // < set this option
},
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
},
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
valueSuffix: '%'
},
series: [{
name: 'Cash Flow',
data: [{
name: 'Incoming',
y: 40,
color: '#87b22e'
}, {
name: 'Outgoing',
y: 30,
color: 'black'
}, {
name: '',
y: 30,
color: 'white'
}
],
size: '80%',
innerSize: '80%',
dataLabels: {
enabled: false,
formatter: function() {
return false;
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>
<div id="cashflow_graph" style="height: 300px; width:100%;"></div>