const labels = ['s', 'a', 'd']
const data = {
labels: labels,
datasets: [{
label: 'Weekly Sales',
data: [
{products: { sales: [0, 5], id: 1 } },
{products: { sales: [5, 10], id: 2 } },
{products: { sales: [10, 15], id: 3 } },
],
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1
}]
};
// config
const config = {
type: 'bar',
data,
options: {
parsing: {
yAxisKey: 'products.sales',
},
indexAxis: 'y',
scales: {
y: {
beginAtZero: true
}
}
}
};
I'm trying to create a horizontal barchart using Chartjs I'm kind of in trouble putting data to the chart. enter image description here The output should be like this one in the image.
Instead of defining parsing.yAxisKey, you could map the raw data as follows:
data: rawData.map(o => o.products.sales),
Please take a look at your amended and runnable code below and see how it works.
const labels = ['s', 'a', 'd'];
const rawData = [
{products: { sales: [0, 5], id: 1 } },
{products: { sales: [5, 10], id: 2 } },
{products: { sales: [10, 15], id: 3 } },
];
const data = {
labels: labels,
datasets: [{
label: 'Weekly Sales',
data: rawData.map(o => o.products.sales),
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1
}]
};
// config
const config = {
type: 'bar',
data,
options: {
indexAxis: 'y',
scales: {
y: {
beginAtZero: true
}
}
}
};
new Chart('myChart', config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>
Related
Is it possible to make a time interval using Chart.js? As far as I'm concerned, using stacked bars chart is the closest I can get but not quite what I want
What I'm trying to achieve is this time interval
Here's the code
const data = {
labels: ['Mon', 'Tue', 'Wed' ],
datasets: [{
label: 'Bars',
data: [
[14, 16],
[17, 22],
[13, 19],
],
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
],
borderColor: [
'rgba(255, 26, 104, 1)',
],
borderWidth: 2,
borderSkipped: false
}]
};
const config = {
type: 'bar',
data,
options: {
indexAxis: 'y',
scales: {
x: {
min: 12,
max: 26,
ticks: {
stepSize: 1,
callback: (val, index) => {
return `${String(val % 24).padStart(2, '0')}:00`
}
},
},
y: {
beginAtZero: true
}
}
}
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
You can use horizontalBar for your bar type. Example:
{
type: 'horizontalBar',
data: {
labels: ["a","b","c","d","e","f","g"],
datasets: [{
axis: 'y',
label: 'My First Dataset',
data: [[5,65], [30,90], [20,80], [15,71], [20,56], [24,55], [15,70]],
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: {
indexAxis: 'y',
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
}
}
here the result
I hope can help you.
Vertical bar chart:
I want to achieve this vertical bar chart image in the link above but the result of my code is displaying a normal bar chart. Here is a snippet of the code I'm using to generate the chart:
<template name="VerticalCharts">
<div class="profile-user-box">
<canvas id="myCharts"></canvas>
</div>
</template>
Template.VerticalCharts.onRendered(function() {
var ctx = document.getElementById('myCharts').getContext('2d');
var myCharts = 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: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Bar Chart'
}
}
},
});
});
What you have is a vertical bar chart, if you want horizontal bars you need to set the indexAxis to 'y' in your options object like so:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
indexAxis: 'y'
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>
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
I cannot figure out how to change the text color to white. I would like to change it for the x,y axis and the label at the top of the chart. I have looked at other posts on stack overflow and I feel like those posts are outdated and are for older versions of chart.js.
ChartJS Version: 3.3.2
CODE:
<canvas id="myChart" width="1000px" height="1000px"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
<?php
echo "labels: [";
for ($i = 1; $i < $monthdays; $i++) {
echo "'" . $i . "'" . ",";
}
echo "],";
?>
//labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
color: 'rgb(255,255,255)',
label: 'net volume of sales',
data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 5, 5, 5, 5, 5],
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
/*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: {
x: {
grid: {
display: false
}
},
y: {
grid: {
display: false
},
beginAtZero: true
}
}
}
});
</script>
This is in 3.3.2. Answer based on one provided by Juergen Fink in this thread stackoverflow.com/questions/37292423/chart-js-label-color
new Chart(document.getElementById("myChart"), {
type: 'bar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}
]
},
options: {
plugins: {
legend: {
labels: {
color: "white",
font: {
size: 18
}
}
}
},
title: {
display: true,
text: 'Predicted world population (millions) in 2050',
},
scales: {
y: {
ticks: {
color: "white",
font: {
size: 15,
},
stepSize: 1,
beginAtZero: true
}
},
x: {
ticks: {
color: "white",
font: {
size: 14
},
stepSize: 1,
beginAtZero: true
}
}
}
}
});
canvas {
background: grey;
}
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.3.2/dist/chart.min.js"></script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: {{ labels}},//labels are the time values
datasets: [{
label: '# temperature',
data: {{ datas}},
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: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
You need to define your xAxis as a time cartesian axis with a unit that matches your data. The default display format of 'hour' is 'hA' (for instance '2PM'). You should probably also use the same format for displaying tooltips.
xAxes: [{
type: 'time',
time: {
unit: 'hour',
tooltipFormat: 'hA'
}
}],
Please note that Chart.js uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.
Please have a look at belo runnable code snippet.
const labels = [1585725538000, 1585729616000, 1585742414000, 1585812498000, 1585842536000, 1585918521000, 1585938665000, 1585948685000];
const datas = [15, 16, 15, 17, 12, 13, 11, 12];
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: '# temperature',
data: datas,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'hour',
tooltipFormat: 'hA'
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" height="90"></canvas>