I have some values passed to Chart.js but I found neither / nor - is supported. If the labels are harded coded as UK-aaa or N/A, it works fine. If it is passed as a varible which the project requires, UK or N (letters before the special characters will not recognized and no chart shows. Is there a workround on Javascript other than removing special characters in labels? Thanks.
var C3 = document.getElementById(canv3.getAttribute('id'));
if (C3.getContext) {
if (C3.getContext) {
new Chart(document.getElementById(canv3.getAttribute('id')), {
type: 'bar',
data: {
labels: [{{res.21}},{{res.22}},{{res.23}}], //this is not supported if same value as below passed.
//labels: ['UK-aaa','N/A','N/A'], //this is supported
datasets: [
{
backgroundColor: "rgba(35, 35, 0.5)",
borderColor : "rgba(149, 62, 205, 1)",
pointBackgroundColor: "rgba(62, 149, 205, 1)",
data: [{{res.18}},{{res.19}},{{res.20}}] //numeric value
},
]
},
options: {
responsive: false,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}}
Related
I am working with Chart.js. I want to display every third tick and label on the chart.
With the code below, I am able to skip every third label not the interval/tick also.
I want to skip/remove the interval. Is it possible to skip the tick and interval without modifying the input data ?
I'll for thank full for any kind of inputs/help?
options: {
scales: {
xAxes: [{
autoSkip: false,
ticks: {
callback: function(tick, index, array) {
return (index % 3) ? "" : tick;
}
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
You can define the scriptable option options.scales.x.grid.tickColor as follows. This generates an array that specifies a color for every 3rd tick line only.
grid: {
tickColor: labels.map((l, i) => i % 3 ? null : 'lightgray')
}
For further information, consult Grid Line Configuration from the Chart.js documentation.
Please take a look at the runnable code below and see how it works.
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
const data = [65, 59, 80, 81, 56, 55, 40];
new Chart('myChart', {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'My Dataset',
data: data,
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
scales: {
x: {
autoSkip: false,
grid: {
tickColor: labels.map((l, i) => i % 3 ? null : 'lightgray')
},
ticks: {
callback: (t, i) => i % 3 ? '' : labels[i]
},
},
y: {
beginAtZero: true
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>
My current graphs on the webpage are powered by Chart.js v2.5.3. Charts that were configured a while ago works perfectly fine. Here is the code:
var ctw = document.getElementById("chart-budget");
var myChart = new Chart(ctw, {
type: 'bar',
data: {
labels: ["budget", "costs"],
datasets: [{
label: "Amount",
data: [520980, 23397.81],
backgroundColor: [
'rgba(143, 211, 91, 0.2)',
'rgba(255, 99, 132, 0.2)',
],
borderColor: [
'rgba(143, 211, 91,1)',
'rgba(255, 99, 132, 1)',
],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
drawBorder: false,
}
}],
xAxes: [{
gridLines: {
display: false,
}
}]
}
}
});
As v3 is now available I was thinking to switch to it. A quick test revealed some issues I will need to overcome. One of the issue I'm struggling with is unability to hide dataset legend. In V2.5 it was done by options.legend.display set to false but not any longer.
In the documentation I did not come across anything that could help me.
Is there anyone who can advice on how to hide a legend in Chart.js V3?
/Kuba
Configuring option like below would solve the problem in V3 version.
options: { plugins: { legend: { display: false }, } }
In Chart.js V3 you can add a filter function to options.plugins.legend.labels and evaluate either the labels or their datasetIndex values to suppress specific legends rather than ALL of them.
options: {
plugins: {
legend: {
labels: {
filter: function(legendItem, data) {
let label = data.datasets[legendItem.datasetIndex].label || '';
if (typeof(label) !== 'undefined') {
if (legendItem.datasetIndex >= 3){
return false;
}
}
return label;
}
}
}
}
}
for example, when i load the page, i would like to visually appear slowly, instead of just popups already loaded
For example, when i load this bar graph, everything appears slowly with the nice visualization onto the screen, i think it adds a nice affect
this is my script
<script>
var department = {{department|safe}};
var incomplete = {{incomplete|safe}};
var complete = {{complete|safe}};
// Return with commas in between
var numberWithCommas = function (x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
// Chart.defaults.global.elements.rectangle.backgroundColor = '#FF0000';
var bar_ctx = document.getElementById('bar-chart');
var bar_chart = new Chart(bar_ctx, {
type: 'bar',
data: {
labels: department,
datasets: [
{
label: 'incomplete',
data: incomplete,
backgroundColor: "rgba(55, 160, 225, 0.7)",
hoverBackgroundColor: "rgba(55, 160, 225, 0.7)",
hoverBorderWidth: 2,
hoverBorderColor: 'lightgrey'
},
{
label: 'complete',
data: complete,
backgroundColor: "rgba(225, 58, 55, 0.7)",
hoverBackgroundColor: "rgba(225, 58, 55, 0.7)",
hoverBorderWidth: 2,
hoverBorderColor: 'lightgrey'
},
]
},
options: {
animation: {
duration: 10,
},
tooltips: {
mode: 'label',
callbacks: {
label: function (tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel);
}
}
},
scales: {
xAxes: [{
stacked: true,
gridLines: { display: false },
}],
yAxes: [{
stacked: true,
ticks: {
callback: function (value) { return numberWithCommas(value); },
},
}],
}, // scales
legend: { display: true }
} // options
}
);
</script>
In the options object, there is an animation parameter:
animation: {
duration: 10,
},
I believe this is what you want.
I use Chart.js to create the horizontal bar of my chart. At this point I have is what is the first image.
But I need to create a "BackgroundBar" with percentage, but I do not know how I can do it. Can someone help me?
This is my output right Now.
This is the chart I want..
My code snippet is like below..
var bar_ctx = document.getElementById('bar-chart').getContext('2d');
var purple_orange_gradient = bar_ctx.createLinearGradient(0, 0, 250, 0);
purple_orange_gradient.addColorStop(0.0, 'rgb(237, 28, 36)');
purple_orange_gradient.addColorStop(0.25, 'rgb(228, 81, 173)');
purple_orange_gradient.addColorStop(0.5, 'rgb(194, 112, 215)');
purple_orange_gradient.addColorStop(0.75, 'rgb(158, 143, 239)');
purple_orange_gradient.addColorStop(1.0, 'rgb(106, 159, 247)');
var bar_chart = new Chart(bar_ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue"],
datasets: [{
label: '# of Votes',
data: [12, 19],
backgroundColor: purple_orange_gradient,
hoverBackgroundColor: purple_orange_gradient,
borderWidth: 0
}]
},
options: {
scales: {
yAxes: [{
categorySpacing: 0,
barThickness: 20
}],
xAxes: [{
ticks: {
beginAtZero: true
//max:100
}
}]
}
}
});
<canvas id="bar-chart" width="300" height="125"></canvas>
This can be achieved using a ChartJS plugin called - chartjs-plugin-annotation.
DEMO
var bar_ctx = document.getElementById('bar-chart').getContext('2d');
var purple_orange_gradient = bar_ctx.createLinearGradient(0, 0, 250, 0);
purple_orange_gradient.addColorStop(0.0, 'rgb(237, 28, 36)');
purple_orange_gradient.addColorStop(0.25, 'rgb(228, 81, 173)');
purple_orange_gradient.addColorStop(0.5, 'rgb(194, 112, 215)');
purple_orange_gradient.addColorStop(0.75, 'rgb(158, 143, 239)');
purple_orange_gradient.addColorStop(1.0, 'rgb(106, 159, 247)');
var bar_chart = new Chart(bar_ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue"],
datasets: [{
label: '# of Votes',
data: [12, 19],
backgroundColor: purple_orange_gradient,
hoverBackgroundColor: purple_orange_gradient,
borderWidth: 0
}]
},
options: {
scales: {
yAxes: [{
categorySpacing: 0,
barThickness: 20
}],
xAxes: [{
ticks: {
beginAtZero: true
}
}]
},
annotation: {
annotations: [{
type: 'box',
drawTime: 'beforeDatasetsDraw',
id: 'bg-bar-1',
xScaleID: 'x-axis-0',
xMin: 0,
xMax: 10,
backgroundColor: '#7f7f7f',
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.min.js"></script>
<canvas id="bar-chart" width="300" height="125"></canvas>
To learn more about this plugin and itÂ's use cases, refer here.
How to set a fixed row size in horizontal bar. I tried with
yAxes: [{
barPercentage: 1.0,
categoryPercentage: 1.0
}]
but it resized bar and i need fixed size.
The perfect would be chart with fixed row size (bar, label) and independent of the amount of data (scrollbar). Can I implement it with chartJS?
horizontal bar
code
Thanks.
Here is the update JS code. which will fix the fixed row size in horizontal bar.
https://jsfiddle.net/1knt2md8/
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: [
['Label_1_Line_1', 'Label_1_Line_2', 'Label_1_Line_3'],
['Label_2_Line_1', 'Label_2_Line_2', 'Label_2_Line_3'],
['Label_3_Line_1', 'Label_3_Line_2', 'Label_3_Line_3'],
['Label_4_Line_1', 'Label_4_Line_2', 'Label_4_Line_3'],
['Label_5_Line_1', 'Label_5_Line_2', 'Label_5_Line_3'],
['Label_6_Line_1', 'Label_6_Line_2', 'Label_6_Line_3'],
['Label_7_Line_1', 'Label_7_Line_2', 'Label_7_Line_3'],
],
datasets: [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 70],
}]
},
options: {
scales: {
yAxes: [{
maxBarThickness : 80
}],
xAxes: [{
ticks: {
mix: 0,
max: 40,
stepSize: 5
}
}]
}
}
});