Small value in doughnut chart is not visible - Chartjs - javascript

Small data isn't visible for doughnut chart type. Can i resize it without change label value?
My chart options:
options: {
cutoutPercentage: 65,
maintainAspectRatio: false,
legend: {
display: false
},
plugins: {
datalabels: {
display: false
}
},
tooltips: {
enabled: true,
mode: 'nearest'
},
scales: {
yAxes: [{
ticks: {
max: 5,
min: 0,
stepSize: 0.5
}
}]
}
}
Example:
http://jsfiddle.net/Lkya2tqb/


I converted the dataset to percent and round a small value to 1.
var seriesData = [1,210,215];
var total = seriesData.reduce((a,v) => a + v);
var inPercent = seriesData.map(v => Math.max(v / total * 100, 1));
Create callback for tooltip.
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var value = seriesData[tooltipItem.index];
var label = data.labels[tooltipItem.index];
return `${label}: ${value}`;
}
}
var seriesData = [1, 210, 215];
var total = seriesData.reduce((a, v) => a + v);
var inPercent = seriesData.map(v => Math.max(v / total * 100, 1));
var labelsData = ["one", "two", "second"];
var backgroundColors = ["#FBC02D", "#E64A19", "#388E3C"]
var t = new Chart(document.getElementById('broadcast').getContext('2d'), {
type: "doughnut",
data: {
datasets: [{
data: inPercent,
backgroundColor: backgroundColors,
hoverBorderColor: "#fff"
}],
labels: labelsData,
},
options: {
cutoutPercentage: 65,
maintainAspectRatio: false,
legend: {
display: false
},
plugins: {
datalabels: {
display: false
}
},
tooltips: {
enabled: true,
mode: 'nearest',
callbacks: {
label: function(tooltipItem, data) {
var value = seriesData[tooltipItem.index];
var label = labelsData[tooltipItem.index];
return `${label}: ${value}`;
}
}
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="broadcast" width="350" height="250" style="width: 350px; height: 250px;"></canvas>

Related

How to remove all gridlines, border and show only ticks on a chartjs horizontal bar chart

Following on from the answer in this post
I have the following chart which can also be found here
const d0 = new Date("2023-02-15T00:00:00.721Z").getTime()
const d1 = new Date("2023-02-15T01:00:00.721Z").getTime()
const d2 = new Date("2023-02-15T02:30:00.721Z").getTime()
const d3 = new Date("2023-02-15T03:20:00.721Z").getTime()
const d4 = new Date("2023-02-15T05:05:00.721Z").getTime()
let values = [d0, d1, d2, d3, d4];
let data = {
labels: [''],
datasets: [{
label: 'up',
axis: 'y',
data: [d1],
backgroundColor: 'red',
},{
label: 'down',
axis: 'y',
data: [d2],
backgroundColor: 'yellow',
},{
label: 'out',
axis: 'y',
data: [d3],
backgroundColor: 'green',
},{
label: 'up',
axis: 'y',
data: [d4],
backgroundColor: 'red',
}
]
};
const config = {
data,
type: 'bar',
options:{
elements: {
bar: {
borderWidth: 0
}
},
ticks: {
display: true
},
interaction: {
mode: 'dataset'
},
tooltip: {
mode: 'dataset'
},
hover: {
mode: 'dataset'
},
onClick: function (e) {
// debugger;
var activePointLabel =
this.getElementsAtEventForMode(e, 'dataset', { intersect: true }, false)
alert(activePointLabel[0].datasetIndex);
}
,
plugins: {
legend: {
display: false,
},
title: {
display: false,
},
},
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
grid: {
display: true
},
min: d0,
ticks: {
callback: function(value, index, ticks) {
return moment(value).format('HH:mm');
}
},
// afterBuildTicks: axis => axis.ticks = values.map(v => ({ value: v }))
},
y: {
grid: {
display: false
},
stacked: true
},
}
}};
new Chart(document.getElementById("chart"), config);
This produces this...
]1
I would like to get rid of all the grids lines , except the ticks, but if I set the gird displays false the tick also disappear, and it also leave a border around the chart, etg something like
Is there a way to do this?

Just add border: {display: false}, to the scales configuration. (here is the link to the documentation)
...
scales: {
x: {
border: {
display: false,
},
...
},
...
}
...
Update added full running example:
const d0 = moment.duration('07:00:00').asMinutes();
const d1 = moment.duration('09:00:00').asMinutes();
const d2 = moment.duration('10:45:00').asMinutes();
const d3 = moment.duration('17:35:00').asMinutes();
const d4 = moment.duration('19:00:00').asMinutes();
let values = [d0, d1, d2, d3, d4];
let data = {
labels: [''],
datasets: [{
label: 'up',
axis: 'y',
data: [d1],
backgroundColor: 'red',
},{
label: 'down',
axis: 'y',
data: [d2],
backgroundColor: 'yellow',
},{
label: 'out',
axis: 'y',
data: [d3],
backgroundColor: 'green',
},{
label: 'up',
axis: 'y',
data: [d4],
backgroundColor: 'red',
}
]
};
const config = {
data,
type: 'bar',
options:{
plugins: {
tooltip: {
mode: 'dataset',
callbacks: {
label: function(item){
return moment().startOf('day').add({ minute: item.raw}).format('HH:mm');
}
}
},
legend: {
display: false,
},
title: {
display: false,
},
},
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
min: d0,
border: { display: false },
ticks: {
callback: function(value, index, ticks) {
return moment().startOf('day').add({ minute: value}).format('HH:mm');
}
},
afterBuildTicks: axis => axis.ticks = values.map(v => ({ value: v }))
},
y: {
stacked: true,
grid: { display: false },
},
}
}};
new Chart(document.getElementById("chart"), config);
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>
<script src="//cdn.jsdelivr.net/npm/moment#^2"></script>
<script src="//cdn.jsdelivr.net/npm/chartjs-adapter-moment#^1"></script>
<div class="chart" style="height:84px; width:350px;">
<canvas id="chart" ></canvas>
</div>

use tickColor (see below config) for v 3.8.2
scales: {
x: {
...
grid: {
display: true,
drawTicks: true, //show ticks
borderColor: "transparent", //horizontal line color above ticks (x-axis)
color: "transparent", //grid lines color
tickColor: "#868e96" //ticks color (little line above points)
},
},
...
}

How to show thousand in k format for bar values in chart.js

I have many bars with a thousand values like 35000, 12000, and 76560. So these values are getting overlapped with each other. I need to change Bar values not StepSize.
I want to show these values 35k, 12k and 76.5k format. This is my code
public barStatus() {
var colors = ['#299DFF', '#80FFFF', '#F8362B', ];
var chBar = document.getElementById("chBar");
var chartData = {
datasets: [{
label: 'Success',
data: [35000, 12000, 76560],
backgroundColor: colors[0]
}, ]
}
var barOptions_stacked = {
onClick: this.Status,
tooltips: {
enabled: true
},
plugins: {
datalabels: {
anchor: 'end',
align: 'left',
formatter: Math.round,
font: {
color: 'black'
}
},
},
hover: {
animationDuration: 0
},
scales: {
xAxes: [{
barPercentage: 0.5,
categoryPercentage: 0.5
}
],
yAxes: [{
gridLines: {
display: false
},
type: 'logarithmic',
position: 'left',
ticks: {
min: 0, //minimum tick
max: 100000, //maximum tick
callback: function (value, index, values) {
return Number(value.toString()); //pass tick values as a string into Number function
}
},
afterBuildTicks: function (chartObj) { //Build ticks labelling as per your need
chartObj.ticks = [];
chartObj.ticks.push(0);
chartObj.ticks.push(10);
chartObj.ticks.push(100);
chartObj.ticks.push(1000);
chartObj.ticks.push(10000);
chartObj.ticks.push(100000);
},
scaleLabel: {
display: false
},
stacked: false
}]
},
};
this.Canvas = document.getElementById("chBar");
this.chart = new Chart(this.Canvas, {
type: "bar",
data: chartData,
options: barOptions_stacked
});
}
How can I do that?
Screenshot:

You need to pass a function in formatter option inside datalabels plugin configuration:
datalabels: {
anchor: "end",
align: "left",
formatter: function(context) {
return context / 1000 + "k";
},
font: {
color: "black"
}
}
You can check the solution in this demo: https://stackblitz.com/edit/angular-chart-js-thousand?file=src/app/app.component.ts

For styling only the labels you want something like this:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: "line",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: "# of Votes",
data: [12000, 1900, 3000, 5000, 2201, 3492]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
setTimeout(function() {
myChart.options.scales = {
xAxes: [],
yAxes: [{
gridLines: {
display: false
},
type: 'logarithmic',
position: 'left',
ticks: {
min: 0, //minimum tick
max: 100000, //maximum tick
callback: function(value, index, values) {
return Number((value / 1000).toString()) + 'K'; //pass tick values as a string into Number function
}
},
afterBuildTicks: function(chartObj) { //Build ticks labelling as per your need
chartObj.ticks = [];
chartObj.ticks.push(0);
chartObj.ticks.push(10);
chartObj.ticks.push(100);
chartObj.ticks.push(1000);
chartObj.ticks.push(10000);
chartObj.ticks.push(100000);
},
scaleLabel: {
display: false
}
}]
};
myChart.update();
}, 1000);
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://npmcdn.com/chart.js#latest/dist/Chart.bundle.js"></script>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
In case you want to change the format of the value shown when hovering the chart and displaying the value inside the tooltip, you need to use the tooltip callbacks.
For example:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: "line",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "# of Votes",
data: [12000, 1900, 3000, 5000, 2201, 3492]
}
]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return (tooltipItem.yLabel/1000)+'K';
}
}
},
scales: {
yAxes: [
{
ticks: {
beginAtZero: true
}
}
]
}
}
});
setTimeout(function() {
myChart.options.scales = {
xAxes: [],
yAxes: [ {
gridLines: {
display: false
},
type: 'logarithmic',
position: 'left',
ticks: {
min: 0, //minimum tick
max: 100000, //maximum tick
callback: function (value, index, values) {
return Number((value/1000).toString())+'K'; //pass tick values as a string into Number function
}
},
afterBuildTicks: function (chartObj) { //Build ticks labelling as per your need
chartObj.ticks = [];
chartObj.ticks.push(0);
chartObj.ticks.push(10);
chartObj.ticks.push(100);
chartObj.ticks.push(1000);
chartObj.ticks.push(10000);
chartObj.ticks.push(100000);
},
scaleLabel: {
display: false
}
}
]
};
myChart.update();
}, 1000);
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://npmcdn.com/chart.js#latest/dist/Chart.bundle.js"></script>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
Last example involves the plugin you use in your question.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: "line",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
datalabels: {
color: '#000'
},
label: "# of Votes",
data: [12000, 1900, 3000, 5000, 2201, 3492]
}]
},
options: {
plugins: {
datalabels: {
color: '#000',
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex] + ': ' + Math.round(value / 1000) + 'K';
}
}
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return (tooltipItem.yLabel / 1000) + 'K';
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
setTimeout(function() {
myChart.options.scales = {
xAxes: [],
yAxes: [{
gridLines: {
display: false
},
type: 'logarithmic',
position: 'left',
ticks: {
min: 0, //minimum tick
max: 100000, //maximum tick
callback: function(value, index, values) {
return Number((value / 1000).toString()) + 'K'; //pass tick values as a string into Number function
}
},
afterBuildTicks: function(chartObj) { //Build ticks labelling as per your need
chartObj.ticks = [];
chartObj.ticks.push(0);
chartObj.ticks.push(10);
chartObj.ticks.push(100);
chartObj.ticks.push(1000);
chartObj.ticks.push(10000);
chartObj.ticks.push(100000);
},
scaleLabel: {
display: false
}
}]
};
myChart.update();
}, 1000);
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://npmcdn.com/chart.js#latest/dist/Chart.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>

I have found the solution (just now). In config option its will have animation and call back with function onComplete. Here you can draw the label with any format you want. Please see this picture for code

Chartjs fixed range on X axis and custom labels

I'm trying to create a scatter plot with Chartjs.
I want to have few datasets centered around one X value, and three Y values.
When I can't set the custom X labels for my dataset, and also can't set a fixed range for X axes.
This is how I generate the data:
function generateData(n, xCenter, yCenter) {
var data = [];
var spread = 0.2
for (var i = 0; i < n; i++) {
data.push({
x: (Math.random() - 0.5)*spread + xCenter,
y: (Math.random() - 0.5)*spread + yCenter
})
}
return data
}
var scatterChartData = {
datasets: [
{
label: 'My First dataset',
backgroundColor: "#0000FF",
data: generateData(100, 1, 2)
},
{
label: 'My Second dataset',
backgroundColor: "#00FF00",
data: generateData(50, 1, 3)
},
{
label: 'My Second dataset',
backgroundColor: "#00FF00",
data: generateData(50, 1, 4)
},
]
}
Here are the scatter options:
var scatterOptions = {
tooltips: {
enabled: true
},
responsive: true, // Instruct chart js to respond nicely.
maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false,
ticks: {
min: 0,
max: 10,
stepSize: 0.01
}
}
}],
yAxes: [{
gridLines: {
display: true,
ticks: {
stepSize: 0.01,
suggestedMin: 0.5,
suggestedMax: 5
}
}
}]
}
}
And this is the plot:
var myChart = new Chart(ctx, {
showTooltips: false,
type: 'scatter',
data: scatterChartData,
options: scatterOptions
});

how to put "%" in chart pie (chartjs)

I need to put % after the number in the chart:
Like: 100%
This is the code that i'm using to make the chart, using chart js:
new Chart(document.getElementById("pie-chart-one"), {
type: 'doughnut',
data: {
labels: ['Transmitidas', 'Não Transmitidas'],
datasets: [{
data: [#Model.PorcentQtdDeclaracoesStatusTransmitida, #Model.PorcentQtdDeclaracoesStatusNaoTransmitida],
backgroundColor: backgroudColor,
borderWidth: 1,
}]
},
options: {
legend: {
display: true,
position: 'bottom',
fontSize: 10
},
responsive:false,
fontsize: 11,
layout: {
padding: {
left: 0,
right: 0,
top: 30,
bottom: 30
}
}
}
});

in options definitions...
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
return tooltipItems.yLabel + ' %';
}
}
},
}

I solve the problem using a callback and a title inside the tooltip:
options: {
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var total = dataset.data.reduce(function (previousValue, currentValue, currentIndex, array) {
return previousValue + currentValue;
});
var currentValue = dataset.data[tooltipItem.index];
var percentage = Math.floor(((currentValue / total) * 100) + 0.5);
return percentage + "%";
},
title: function (tooltipItem, data) {
return data.labels[tooltipItem[0].index];
}
}
}

Edit styles for axes in ChartJS bar chart, when gridlines are hidden

I have a bar chart with gridlines displayed to false. Now, I need to set the width and color, only for the axis lines (x and y). I can set these values as:
options:{
scales: {
xAxes: [{
gridLines: {
color: "rgba(0,0,0,1)",
lineWidth: 1
}
}],
yAxes: [{
gridLines: {
color: "rgba(0,0,0,1)",
lineWidth: 1
}
}],
}
}
However, when I want to hide the gridlines, I am unable to set the styling (width or color) , only for the axes.
options:{
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}],
}
}
I have tried scaleLineColor but that too didn't seem to work. Here is my full code:
var q1 = document.getElementById("q1").getContext('2d');
var q1Chart = new Chart(q1, {
type: 'bar',
data: {
labels: ["Very Good(9-10)","Good(8-7)","OK(5-6)","Bad (3-4)","Cant be worse (0-2)"],
datasets: [{
label: "Our Performance",
data: [19.56,37.90,1.29,30.36,10.89],
backgroundColor: ["#d93030","#288fba","#367fa9","#367fa9","#367fa9"],
datalabels: {
align: 'top',
anchor: 'end',
font: {
size: 18,
weight: 900,
},
formatter: function(value) {
var label = value;
var keys, klen, k;
return label + '%';
}
}
}]
},
scaleLineColor: "rgba(0,0,0,1)",
options:{
scales: {
xAxes: [{
barThickness : 50,
ticks: {
fontColor: "black",
fontSize: 20,
autoSkip: false,
},
gridLines: {
display:false
}
}],
yAxes: [{
ticks: {
fontColor: "black",
fontSize: 20,
beginAtZero: true,
stepSize: 10
},
gridLines: {
display:false
}
}],
},
responsive: false,
maintainAspectRatio: true,
legend: {
display: false
},
tooltips: {
enabled: false
},
layout: {
padding: {
left: 0,
right: 0,
top: 30,
bottom: 0
}
}
},
});

The only way I know to do this, is to write a plugin to do it
Chart.pluginService.register({
afterDraw: function (chart, easing) {
if (chart.config.options && chart.config.options.scales) {
if (chart.config.options.scales.xAxes)
chart.config.options.scales.xAxes.forEach(function (xAxisConfig) {
if (!xAxisConfig.color)
return;
var ctx = chart.chart.ctx;
var chartArea = chart.chartArea;
var xAxis = chart.scales[xAxisConfig.id];
// just draw the scale again with different colors
var color = xAxisConfig.gridLines.color;
xAxisConfig.gridLines.color = xAxisConfig.color;
xAxis.draw(chartArea);
xAxisConfig.gridLines.color = color;
});
if (chart.config.options.scales.yAxes)
chart.config.options.scales.yAxes.forEach(function (yAxisConfig) {
if (!yAxisConfig.color)
return;
var ctx = chart.chart.ctx;
var chartArea = chart.chartArea;
var yAxis = chart.scales[yAxisConfig.id];
var color = yAxisConfig.gridLines.color;
yAxisConfig.gridLines.color = yAxisConfig.color;
yAxis.draw(chartArea);
yAxisConfig.gridLines.color = color;
ctx.restore();
});
}
}
});
Chart.pluginService.register({
afterDraw: function (chart, easing) {
if (chart.config.options && chart.config.options.scales) {
if (chart.config.options.scales.xAxes)
chart.config.options.scales.xAxes.forEach(function (xAxisConfig) {
if (!xAxisConfig.color)
return;
var ctx = chart.chart.ctx;
var chartArea = chart.chartArea;
var xAxis = chart.scales[xAxisConfig.id];
// just draw the scale again with different colors
var color = xAxisConfig.gridLines.color;
xAxisConfig.gridLines.color = xAxisConfig.color;
xAxis.draw(chartArea);
xAxisConfig.gridLines.color = color;
});
if (chart.config.options.scales.yAxes)
chart.config.options.scales.yAxes.forEach(function (yAxisConfig) {
if (!yAxisConfig.color)
return;
var ctx = chart.chart.ctx;
var chartArea = chart.chartArea;
var yAxis = chart.scales[yAxisConfig.id];
var color = yAxisConfig.gridLines.color;
yAxisConfig.gridLines.color = yAxisConfig.color;
yAxis.draw(chartArea);
yAxisConfig.gridLines.color = color;
ctx.restore();
});
}
}
});
var q1 = document.getElementById("q1").getContext('2d');
var q1Chart = new Chart(q1, {
type: 'bar',
data: {
labels: ["Very Good(9-10)", "Good(8-7)", "OK(5-6)", "Bad (3-4)", "Cant be worse (0-2)"],
datasets: [{
label: "Our Performance",
data: [19.56, 37.90, 1.29, 30.36, 10.89],
backgroundColor: ["#d93030", "#288fba", "#367fa9", "#367fa9", "#367fa9"],
datalabels: {
align: 'top',
anchor: 'end',
font: {
size: 18,
weight: 900,
},
formatter: function (value) {
var label = value;
var keys, klen, k;
return label + '%';
}
}
}]
},
scaleLineColor: "rgba(0,0,0,1)",
options: {
scales: {
xAxes: [{
color: 'yellow',
barThickness: 100,
ticks: {
fontColor: "black",
fontSize: 20,
autoSkip: false,
},
gridLines: {
display: false
}
}],
yAxes: [{
color: 'yellow',
barThickness: 150,
ticks: {
fontColor: "black",
fontSize: 20,
beginAtZero: true,
stepSize: 10
},
gridLines: {
display: false
}
}],
},
responsive: true,
maintainAspectRatio: true,
legend: {
display: false
},
tooltips: {
enabled: false
},
layout: {
padding: {
left: 0,
right: 0,
top: 30,
bottom: 0
}
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<canvas id="q1" height=""></canvas>

Categories