i'm starting new project using python and chart.js and i am using bar chart of chart.js, I want to fix width of every bars but it's still look like this, so how can i apply fix width for all bar?
Max 6 bar showing at a time, when we add 7th bar then horizontal scroll is appeared.
you can use :
barPercentage property like this
xAxes:[{
barPercentage: 0.1,
gridLines: {
display:false
}
}]
barPercentage takes value from 0 to 1 where 1 being the 100% available width
For more details on barPercentage see this
Sample FIDDLE
For fix width with different data variant :
Try this link1 link2
This fixes it
works for most versions, including in react.js
import {Chart} from "chart.js"
Chart.defaults.datasets.bar.barThickness = 73;
//also try barPercentage, maxBarThickness
use this as example
var ctx = document.getElementById("my_chart").getContext("2d");
new Chart(ctx, {
type: 'bar',
data: {
labels: ["Jan", "Feb", "Mar", "Apr"],
datasets: [{
label: "Title on top",
data: [10, 80, 56, 60],
backgroundColor: "#1491e5",
barThickness: 30 //<---- here important
}]
},
options: {
maintainAspectRatio: false//<---- here important
}
});
Related
I made a horizontal bar chart using Chart.js. In default setting all the legends are shown all together like this
there is no gap among them. I want to show each legend aligned with each bar like this
I tried so many solutions but none of them worked. Is it possible to show legends right and center aligned with each bar in chart.js?
I am using Chart.js (v.3.7)
The behavior you are looking for can possibly be achieved by using the padding option in the Legend Label Configuration and trying to find the correct value.
This could look something like this:
const chart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
plugins: {
legend: {
display: true,
labels: {
padding: 15 // change according to testing
}
}
}
}
});
You would usually not use a legend for this but instead label the axis directly as described in the link below.
Have a look at the documentation: https://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration
It provides an example on how to use axis labels like that:
// config
const config = {
type: 'bar',
data,
options: {
indexAxis: 'y',
scales: {
y: {
ticks: {
crossAlign: 'far',
}
}
}
}
};
// setup
const labels = ["Label 1", "Label 2", "Label 3"]
const data = {
labels: labels,
datasets: [{
label: 'My dataset',
borderWidth: 1,
data: [65, 59, 80],
}]
};
I'm building a scatter chart using Chart.JS(latest version), one of the behaviours I'm trying to implement is clicking on a single point and highlighting it by changing the background color of the selected point.
I've used the getElementsAtEvent method from the Chart.JS API in order to get the active element and change it's background. For a brief moment I can see it changing the color but it returns to its original color and all the other points now have the color I wanted to apply to the selected one... I tried various approaches to this, using the updated and render methods but with no desired result...
Here's the code inside the function that'll run onClick
function (evt, activeElements, chart) {
const selectedPoint = chart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
selectedPoint[0].element.options.backgroundColor = '#fa6400';
chart.update();
}
Here's a fiddle
https://jsfiddle.net/dc3x70yg/1/
Thanks in advance
You can define the option pointBackgroundColor on the dataset. When the user clicks on a point, you recreate pointBackgroundColor, but now use an array that contains the desired color for each point.
Please take a look at your amended code below and see how it works.
new Chart('myChart', {
type: 'scatter',
data: {
datasets: [{
label: '# of Votes',
data: [{ x: -10, y: 0 }, { x: 0, y: 10 }, { x: 10, y: 5 }, { x: 0.5, y: 5.5 }],
pointBackgroundColor: '#ddd',
pointRadius: 5,
}]
},
options: {
onClick: (event, elements, chart) => {
const dataset = chart.data.datasets[0];
dataset.pointBackgroundColor = dataset.data.map((v, i) => i == elements[0]?.index ? '#fa6400': '#ddd');
chart.update();
},
scales: {
y: {
beginAtZero: true
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
i am trying to add error bars to a horizontal bar chart in chartjs using the chartjs-plugin-error-bars.
It seems that the error bar is tied to a label rather than the actual data, but i dont want do display the label. is there a way to either not declare a label an still have error bars, or just hide the label.
var barChartData = {
labels: ["shouldNotBeDisplayed"],
datasets: [{
data: [
56,
],
errorBars: {
shouldNotBeDisplayed: {plus: 1, minus: 1},
}
}]
};
you can try it out here and see the chart:
https://codepen.io/reckert/pen/rNWmdeK
Thank you in advance
You can filter out tick labels by defining a yAxes.ticks.callback function as follows.
options: {
...
scales: {
yAxes: [{
ticks: {
callback: () => undefined
}
}]
},
For further details, please consult chapter Creating Custom Tick Formats from the Chart.js documentation.
I'm trying to position a custom Chart.js tooltip on the middle of two bars. I made a research on the chart.js docs and different posts but didn't found any different approach than position it using the following snippet (I'm using jquery and doing a toggle class to hide/show the tooltip, please focus on the values I'm using to position the tooltip):
function setupTooltipPosition(config) {
const { tooltipElement, tooltipModel } = config;
const leftOffset = this._chart.canvas.offsetLeft;
const topOffset = this._chart.canvas.offsetTop;
tooltipElement.removeClass(tooltipSelectors.hide);
tooltipElement.css('left', `${tooltipModel.caretX - leftOffset}px`);
tooltipElement.css('top', `${tooltipModel.carteY - topOffset}px`);
}
Using this approach on this particular case I got this result:
[
I also tried using the x and y values of the tooltipModel , however , it doesn't add more sense of how to put the tooltip in the middle. If you tried to add a custom offset to put it on the middle , it works for just this case, but when you add more data it doesn't work. I can have at most 2 datasets, however, the user can add at most 10 data values that means 10 groups of bars.
The question is: There is a way to put the tooltip in the middle of the group of bars (or a single bar in case the user has just 1 dataset) using the values that Chart.js provide for tooltips? Or in other case, do you know any custom approach to have this tooltip centered?
Thanks!!
You don't specify if 'middle' means on the x- and/or y-axis. But since you wrote:
...on the middle of two bars...
I assume you mean on the x-axis. In this case you need to set the options.tooltips.mode property to index. Below is a working example.
let myChart = new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['x', 'y', 'z'],
datasets: [{
label: '1993',
data: [50, 30, 65],
backgroundColor: '#503291'
}, {
label: '1994',
data: [60, 15, 65],
backgroundColor: '#1bbecd'
}]
},
options: {
tooltips: {
mode: 'index'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
barPercentage: 1
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>
For future questions please provide a MCVE as that makes it much quicker and easier to help you.
I want to make a part of the labels in chartJS bold. I've been looking in the documentation but I cant find of any way. I hope there is someone who can help me out if it is possible at all. :) Below is a picture of how I want it to work. (its made in photoshop)
So I want to make the "bar total", "bar 1", "bar 2", "bar 3" and "bar 4" bold so the difference with the hours is more clear.
The labels are set in my code like this:
labels: [["bar total", "150 hour"], ["bar 1", "70 hour"], ["bar 2", "30 hour"], ["bar 3", "40 hour"], ["bar 4", "10 hour"]],
Iam using ChartJS version 2.3.0.
Any ideas?
I'm not too familiar with chartJS but I do believe that you can add the following :
Chart.defaults.global.defaultFontStyle = 'Bold'
OR
options: {
scale: {
pointLabels :{
fontStyle: "bold",
}
}
}
References:
1) Chart js. How to change font styles for "labels" array?
Hope this helps!
Joel
The labels are actually denoted by ticks , please try below solution.
public barChartOptions = {
scales: {
xAxes: [{
/* For changing color of x-axis coordinates */
ticks: {
fontSize: 18,
padding: 0,
fontColor: '#000'
}
}]
}
};
Hopefully this will help you.
You need to use directly the UTF-8 characters. I am working on different graphs now and the tool which is available at https://yaytext.com/bold-italic/ helped me a lot.
For example, the following words were created by the tool, see the source code, they are without any HTML formatting:
Hello World!
πππ₯π₯π¨ ππ¨π«π₯π!
ππ²πΉπΉπΌ πͺπΌπΏπΉπ±!
π»ππππ πππππ!
I just tried this. Any acceptable values from the link below should work
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
Ex:
Chart.defaults.global.defaultFontStyle = '600';
If you are looking for a fancy label with value processing and with some sign, bold label etc.
labels: {
render:function (args) {
if (args.value != 0)
return +(parseFloat(args.value).toFixed(2)) + "hrs";
},
fontStyle: "bold",
fontColor: 'black',
position : 'outside'
}
I hope this helps.
The fontStyle value should be present inside the ticks object (in case of react-chartjs-2).
const options = {
scales: {
xAxes: [
{
ticks: {
fontColor: '#2c2c2c', // X-Axis font color
fontStyle: 'bold', // X-Axis font style
},
},
],
}
}
Chart.defaults.global.defaultFontColor = 'red';
let chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
legend: {
labels: {
// This more specific font property overrides the global property
fontColor: 'black'
}
}
}
});
You can find in http://www.chartjs.org/docs/latest/general/fonts.html
I hope it will be help you.