How to properly render Chartjs with big difference between bars data? - javascript

I have to render a bar chart that sometimes have a huge difference between each data value. So the greatest values shows fine but the others that seems to be little in comparison with the others don't show properly.
How can I improve my chart giving to the user the possibility to see at list a proportional piece of the minimal values?

You can define the yAxis as a logarithmic cartesian axis as shown in the runnable code snippet below.
new Chart("chart", {
type: "bar",
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: "My Dataset",
data: [50, 11780, 220855, 581358],
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)"],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
type: 'logarithmic',
ticks: {
userCallback: (value, index) => {
const remain = value / (Math.pow(10, Math.floor(Chart.helpers.log10(value))));
if (remain == 1 || remain == 2 || remain == 5 || index == 0) {
return value.toLocaleString();
}
return '';
}
},
gridLines: {
display: false
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="180"></canvas>

Related

How to convert a bar chart into a triangle shaped chart using Chart JS?

How to convert a bar chart into a triangle shaped chart using Chart JS ?
For eg: Sample Bar Chart : How to convert it into triangles instead of bars ?
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
You can use a scatter chart and define individual datasets for each value.
Please take a look at your amended code and see how it works.
const labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];
const data = [12, 19, 3, 5, 2, 3];
const colors = ['255, 99, 132', '54, 162, 235', '255, 206, 86', '75, 192, 192', '153, 102, 255', '255, 159, 64'];
const datasets = labels.map((l, i) => ({
label: l,
data: [{ x: i + 1 - 0.45, y: 0 }, { x: i + 1, y: data[i] }, { x: i + 1 + 0.45, y: 0 }],
fill: true,
backgroundColor: 'rgba(' + colors[i] + ', 0.2)',
borderColor: 'rgb(' + colors[i] + ')',
showLine: true,
borderWidth: 1,
lineTension: 0,
pointRadius: 0,
pointHitRadius: 0
}));
new Chart('myChart', {
type: 'scatter',
data: {
datasets: datasets
},
options: {
scales: {
y: {
beginAtZero: true
},
x: {
min: 0,
max: labels.length + 1,
ticks: {
callback: (v, i) => labels[i - 1]
},
grid: {
display: false
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js"></script>
<canvas id="myChart" height="110"></canvas>
You will have to implement your own custom chart type to do this since it's not possible by default, you can read here in the documentation how to implement your own chart type: https://www.chartjs.org/docs/master/developers/charts.html

Not able to change chart.js x and y font colors

I tried changing the xticks color of chart js but somehow this is not working. This is the cdn I am using.
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.4.1/dist/chart.min.js"></script>
function plot(x, y, chartTitle, labelText) {
$("#canvasCard").html(
'<canvas id="myChart" width="600px" height="600px"></canvas>'
);
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "line",
data: {
labels: x,
datasets: [
{
label: labelText,
data: y,
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
],
borderColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",
],
borderWidth: 2,
},
],
},
options: {
responsive: false,
plugins:{
title: {
display: true,
text: chartTitle
}},
scales: {
y: {
beginAtZero: true,
},
xAxes: [{
ticks: {
fontColor: 'green'
}
}]
},
},
});
}
Doesn't have any effect
I googled the problem and many of them have listed the same thing as it is in the scales object. Still it isn't working. Any help appreciated
Thank you in advance.
I found the answer! In v3.4.1 or v3 and above chart js has different description.
Trying this worked. So this works
scales: {
y: {
beginAtZero: true,
ticks:{
color: "white"
}
},
x:{
ticks:{
color: "white"
}
}
}
Instead of the following code. The following works in previous versions.
scales: {
y: {
beginAtZero: true,
},
xAxes: [{
ticks: {
fontColor: 'green'
}
}]
}
Thank You.

How to get the length (height) of the vertical bar in Chart.js

I have a vertical bar in my project (I use chart.js). I need to know its length/height (in pixels). I try to get it like this:
afterDraw: chart => {
var yAxis = chart.scales['y-axis-0'];
chart.config.data.datasets[0].data.forEach((value, index) => {
console.log(Math.round(yAxis.getPixelForValue(value)));
});
}
But I got incorrect values. For horizontal bar it's work correctly (with var xAxis = chart.scales['x-axis-0']).
What the problem? How to do it?
Try using getDatasetMeta() to get the metadata.
var meta = myChart.getDatasetMeta(0);
var height = meta.data[0]._model.height;
The origin (value zero) of the y-axis is at the top of the canvas. Therefore, you need to subtract the value obtained through yAxis.getPixelForValue(value) from yAxis.bottom as follows:
afterLayout: chart => {
var yAxis = chart.scales['y-axis-0'];
chart.data.datasets[0].data.forEach(value => {
console.log(Math.round(yAxis.bottom - yAxis.getPixelForValue(value)));
});
}
Please take a look at below sample and see how it works (code is derived from the Chart.js Bar documentation page).
new Chart('myChart', {
type: "bar",
plugins: [{
afterLayout: chart => {
var yAxis = chart.scales['y-axis-0'];
chart.data.datasets[0].data.forEach(value => {
console.log(Math.round(yAxis.bottom - yAxis.getPixelForValue(value)));
});
}
}],
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
stepSize: 20
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>

Adding image on the top of bar in chartjs

I was using a different chart on my site which was causing some issues so we migrated to chartjs. Everything works fine but I have one requirement which I cannot find in chartjs.
In the site I am working on, the user gives an assessment and it shows the graph based on the assessment results.
So in the assessment, there is a question "Are you feeling exacerbation?" If the user selects yes then in the graph it shows an image above that bar like below image.
In the picture you can see "E" above the two bars.
I want to achieve the same in chartjs. Is it possible? If not then can you guys suggest a way to notify the user that they have selected "exacerbation".
Thank you
You can place images on top of individual bars using chartjs-plugin-labels.
Please have a look at the following runnable code snippet:
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: 'My Dataset',
data: [25, 59, 80, 76],
fill: false,
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)'],
borderWidth: 1
}]
},
options: {
plugins: {
labels: {
render: 'image',
textMargin: 10,
images: [
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
},
null,
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
},
null
]
}
},
layout: {
padding: {
top: 30
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
canvas {
max-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart" width="10" height="6"></canvas>

How to change the Y-axis values from numbers to strings in Chart.js?

I am using Chart.js and am trying to change the y-axis (see screen shot below). I tried filling the yLabels property with an array of strings. But that didn't work. Any help would be appreciated!
jQuery(document).ready(function($) {
'use strict ';
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["HTML", "CSS", "SCSS", "JavaScript"],
yLabels: [
'newb',
'codecademy',
'code-school',
'bootcamp',
'junior-dev',
'mid-level',
'senior-dev',
'full-stack-dev',
'famous-speaker',
'unicorn'
],
datasets: [{
data: [12, 19, 3, 10],
backgroundColor: [
'rgba(255, 159, 64, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)'
],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
// scales: {
// yAxes: [{
// ticks: {
// beginAtZero: true
// }
// }]
// },
title: {
display: true,
text: 'Shameless Bar Graph to show proficency in skills'
}
}
});
});
For version 2.x, yAxes labels are actually stored in the options of the chart, and not its data as you did.
If you take a look at the docs, you'll see that you have to edit the callback attributes of the ticks in options.scales.yAxes .
To do what you want, I just added a JS object in your code :
// Replace the value with what you actually want for a specific key
var yLabels = {
0 : 'newb', 2 : 'codecademy', 4 : 'code-school', 6 : 'bootcamp', 8 : 'junior-dev',
10 : 'mid-level', 12 : 'senior-dev', 14 : 'full-stack-dev', 16 : 'famous-speaker',
18 : 'unicorn', 20 : 'harambe'
}
And then in the callback :
options: {
scales: {
yAxes: [{
ticks: {
callback: function(value, index, values) {
// for a value (tick) equals to 8
return yLabels[value];
// 'junior-dev' will be returned instead and displayed on your chart
}
}
}]
}
}
Take a look at this jsFiddle for the result.
Update for the 3.9.1 version (see https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats). It's quite similar but you will need to change to syntax to get :
options: {
scales: {
y: {
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, ticks) {
return '$' + value;
}
}
}
}
}

Categories