I am using chart.js and it's bar chart. I am displaying some data for the period of 12 months. What I would like to do is to set the width of the bar that is representing current month to a higher value than the others. But, I am not sure how to do this, since I only saw an option of setting the width to every bar in the dataset. This are my options that I currently have:
const options = {
type: "bar",
data: {
labels: counties.map(county => dateStringEU(county.Date.split(" ")[0])).reverse(),
datasets: [
{
backgroundColor: "#006BE8",
borderColor: "rgba(151,187,205,1)",
barPercentage: 0.9,
categoryPercentage: 0.9,
}
]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [
{
ticks: {
fontColor: '#736B8A',
beginAtZero: true,
stepSize: 100
},
gridLines: {
display: false
}
}
],
xAxes: [
{
ticks: {
fontColor: '#736B8A'
},
gridLines: {
display: false
}
}
]
}
}
}
Is it possible to set the width individually for each bar and how can we do it if so?
Despite it's not clearly documented, you can define barPercentage as an array of values.
barPercentage: [0.5, 0.5, 0.5, 0.5, 1, 0.5, 0.5],
Please have a look at the amended code from Chart.js bar documentation.
new Chart(document.getElementById("chart"), {
type: "bar",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
barPercentage: [0.5,0.5,0.5,0.5,1,0.5,0.5],
categoryPercentage: 1,
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: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="80"></canvas>
Related
I tried every possible way, every form-answer but anything works inmy code. I want yAxes begin at zero and max value is 100 but all my chart begin with other values (see pic). What can I do?
var options = {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
max: 100,
min: 0
}
}]
},
title: {
display: true,
text: name
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
};
key is to pass options in the Chart constructor instead of part of data
new Chart(ctx, {
type: 'bar',
data: {{ chart_data|safe }},
options: {
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
above works for me!
#Nikolas,
Here is the fiddle where the parameters you set works well.
https://jsfiddle.net/shemdani/zkb215up/2/
var options = {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
max: 100,
min: 0
}
}]
},
title: {
display: true,
text: name
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
};
var data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [32, 59, 36, 25, 68, 71],
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
}]
}
var ctx = document.getElementById("myChart");
var chartInstance = new Chart(ctx, {
type: 'line',
data: data,
options:options
});
Please check and see what you are doing wrong. I used the basic data from charjs documentation.
Working for version 3.2.0:
var options = {
// plugins, responsive etc...
scales: {
y: {
min: 0
}
},
//tooltips specifications...
}
The y-axis will start at 0:
I tried different solutions and adding barThickness: 25 in options worked for me.
I'm trying to create curved labels for a Polar Area graph using Chart.js, like this:
I have found this issue where they discuss it, but it doesn't seem to have an answer yet.
So far, I'm only being able to display the labels at the side of the graph, but not in a curved way:
Chart.register( ChartDataLabels );
const config = {
"type": "polarArea",
"data": {
"labels": [
"aaaaaaaa",
"bbbbbbbb",
"cccccccc",
"dddddddd",
"eeeeeeee",
"ffffffff",
"gggggggg",
"hhhhhhhh"
],
"datasets": [
{
"data": [
80,
40,
54,
62,
71,
45,
50,
85
],
"backgroundColor": [
"#674ea7",
"#db4b4b",
"#2f2f6e",
"#3c1414",
"#fc3631",
"#556b2f",
"#820000",
"#76a5af"
]
}
]
},
"options": {
"responsive": true,
"scales": {
"r": {
"angleLines": {
"display": true
},
"ticks": {
"display": false
},
"pointLabels": {
"display": true,
"centerPointLabels": true,
"font": {
"size": 14
}
}
}
},
"scale": {
"min": 0,
"max": 100,
"ticks": {
"display": false,
"beginAtZero": true
}
},
"plugins": {
"legend": {
"position": 'top',
},
"datalabels": {
"formatter": (value, context) => value + '%',
"color": "#ffffff"
}
}
}
}
const ctx = document.getElementById( 'graph' ).getContext( '2d' );
const chart = new Chart( ctx, config );
Does anyone know how to do it?
You can use chartjs-plugin-labels to achieve this
You can see a working example here
The key is to set arc to true and position to outside in the plugin options. e.g.
{
labels: {
render: 'label',
arc: true,
fontColor: '#000',
position: 'outside'
}
}
Fraser suggested to use chartjs-plugin-labels. The problem is, that chartjs-plugin-labels is no longer maintained and doesn't support Chart.js v3.
Therefore, you should use chart.js-plugin-labels-dv. This plugin was forked from chartjs-plugin-labels and adapted for Chart.js v3.
plugins: {
labels: {
arc: true,
fontColor: '#000',
position: 'outside',
fontSize: 14,
render: (args) => args.dataset.helper ? args.label : '',
fontColor: (args) => legendLabelColors[args.index]
}
}
Note that labels.render makes sure, that the data labels are drawn for the outer (helper) dataset only.
Please take a look at your amended and runnable code and see how it works.
Chart.register( ChartDataLabels );
const legendLabelColors = ["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)", "rgb(54, 162, 88)"];
const config = {
type: "polarArea",
data: {
labels: ["aaaaaaaa", "bbbbbbbb", "cccccccc", "dddddddd", "eeeeeeee", "ffffffff", "gggggggg", "hhhhhhhh"],
datasets: [
{
data: [80, 40, 54, 62, 71, 45, 50, 85],
backgroundColor: ["rgba(255, 99, 132, 0.5)", "rgba(255, 159, 64, 0.5)", "rgba(255, 205, 86, 0.5)", "rgba(75, 192, 192, 0.5)", "rgba(54, 162, 235, 0.5)", "rgba(153, 102, 255, 0.5)", "rgba(201, 203, 207, 0.5)", "rgba(54, 162, 88, 0.5)"],
datalabels: {
formatter: (value, context) => value + '%',
color: "#ffffff"
},
},
{
helper: true,
data: [100, 100, 100, 100, 100, 100, 100, 100],
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)", "rgba(54, 162, 88, 0.2)"],
datalabels: {
display: false
}
}
]
},
options: {
layout: {
padding: 20
},
scales: {
r: {
angleLines: {
display: true
},
ticks: {
display: false
},
pointLabels: {
display: false
}
}
},
scale: {
min: 0,
max: 100
},
plugins: {
labels: {
arc: true,
fontColor: '#000',
position: 'outside',
fontSize: 14,
render: (args) => args.dataset.helper ? args.label : '',
fontColor: (args) => legendLabelColors[args.index]
}
}
}
}
const chart = new Chart( 'graph', config );
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2"></script>
<script src="https://unpkg.com/chart.js-plugin-labels-dv/dist/chartjs-plugin-labels.min.js"></script>
<canvas id="graph"></canvas>
I want to make the bar with the maximum value take up the entire height of the chart field. How can I do it?
For example, as if in the picture the height of the chart field was up to the green line
You need to define the option yAxes.ticks.max, its value should correspond to highest value of the data array.
In case the data array is defined outside of the chart configuration, you could use the Math.max() function as follows:
yAxes: [{
ticks: {
max: Math.max(...data)
}
}]
Please take a look at below sample and see how it works (code is derived from the Chart.js Bar documentation page).
const data = [65, 59, 80, 81, 56, 55, 40];
new Chart('myChart', {
type: "bar",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First Dataset",
data: data,
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,
max: Math.max(...data),
maxTicksLimit: 3
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
Is it possible to show a border color around each columns of a bar chart drawn using chart js while hovering on it?
You can define hoverBorderWidth on your dataset as shown in the code below:
new Chart(document.getElementById("chart"), {
type: "bar",
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,
hoverBorderWidth: 5
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="80"></canvas>
I want to do an horizontal bar with 2 yaxes, Where a bar can have a positive or negative value and positive side has a yaxis and the negative side has other yaxis like the image
This is my code JSFiddle.
I can't change the names of the second yaxes
I add arrays with the same values because i would want two yaxes, It is not necessary to use "chart.js" if you knows other library where i can it use, please tell me
var canvas = document.getElementById('myChart');
var extremo1=[-5, 3, 9, -11];
var extremo2=[-5, 3, 9, -11];
var data = {
labels: ["Visua_Verbal", "Secuencial_Global", "Sensitivo_Intuitivo", "Reflexivo_Activo"],
datasets: [
{
backgroundColor: 'rgba(63, 191, 191, 0.75)',
borderColor: 'rgba(63, 191, 191, 0.75)',
hoverBackgroundColor: 'rgba(191, 63, 63, 1)',
hoverBorderColor: 'rgba(191, 63, 63, 1)',
data: extremo1
},
{
backgroundColor: 'rgba(63, 191, 191, 0.75)',
borderColor: 'rgba(63, 191, 191, 0.75)',
hoverBackgroundColor: 'rgba(191, 63, 63, 1)',
hoverBorderColor: 'rgba(191, 63, 63, 1)',
data: extremo1
}
]
};
var option = {
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [{
display: true,
ticks: {
maxTicksLimit: 12
}
}],
yAxes: [{
position: "left",
display: true,
ticks: {
callback:(label,index,labels)=>{
label = label.match(/_(\w*)/)[1];
return label;
}}
},
{
position: "right",
display: true,
ticks: {
callback:(label,index,labels)=>{
return label ;
}
}
}]
},
legend: {
display: false
}
};
var myLineChart = new Chart(canvas,{
type: 'horizontalBar',
data:data,
options:option
});
In the snippet below I've set the options labels, type, offset on the y-axes to achieve the result you want. I've also removed unnecessary properties.
var canvas = document.getElementById('myChart');
var extremo = [-5, 3, 9, -11];
var data = {
datasets: [{
backgroundColor: 'rgba(63, 191, 191, 0.75)',
borderColor: 'rgba(63, 191, 191, 0.75)',
hoverBackgroundColor: 'rgba(191, 63, 63, 1)',
hoverBorderColor: 'rgba(191, 63, 63, 1)',
data: extremo
}]
};
var option = {
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [{
ticks: {
maxTicksLimit: 12
}
}],
yAxes: [{
labels: ['Verbal', 'Global', 'Reflexivo', 'Sensitivo']
},
{
position: 'right',
labels: ['Visual', 'Secuencial', 'Activo', 'Intuitivo'],
gridLines: {
display: false
},
type: 'category',
offset: true
}
]
},
legend: {
display: false
}
};
var myLineChart = new Chart(canvas, {
type: 'horizontalBar',
data: data,
options: option
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart">