I'm trying to allow breaks on spaces for the labels of my data object. I've looked through configuration options on the Chartjs docs tick configuration to either allow line breaks or the ability to add a CSS class where I can handle this with break-word rules.
Data structure object:
{
labels: ["Arts Languages and Communication", "Science, Techology and Health", "Business", "Society and Education"],
datasets: [{label: "Fall 2014", data: [0,0,0,0]}...]
}
Options object:
{
scales: {
xAxes: [{ ticks: { /* no available options from docs */ } }]
}
}
Desired outcome:
Words will break on spaces:
Arts Language
and Communication
If you want your xAxis label to wrap text then you need to pass the data in this format labels: [['LONG', 'LONG', 'LONG', 'LABEL'], "Blue", ['YELLOW', 'LONG'], "Green Green", "Purple", "Orange"]
So in your case -> labels:[['Arts Language', 'and Communication'], 'nextLabel', 'otherLabel']
See a working demo: http://jsfiddle.net/Lzo5g01n/11/
If you want your xAxis label to wrap text then you need to pass the data in this format labels: [['LONG', 'LONG', 'LONG', 'LABEL'], "Blue", ['YELLOW', 'LONG'], "Green Green", "Purple", "Orange"]
So in your case -> labels:[['Arts Language', 'and Communication'], 'nextLabel', 'otherLabel']
See a working demo: http://jsfiddle.net/Lzo5g01n/11/
Adding auto-labels wrap:
ticks: {
callback: val => [val.slice(x,y), val.slice(y)],
}
I came across the same problem.
Here's what I did:
const labels = ["label1","label2","label3"];
ticks: {
autoSkip: false,
maxRotation: 0,
callback: (value: any, index: any, values: any) => {
let label = labels[value];
if(label == null){
return '';
}
if (label.length > 15) {
label = label.substring(0, 15);
label += '..';
}
return label;
},
},
Labels is your x values.
This tick configuration, along with maxRotation and autoSkip, makes your xLabels end with ellipsis if they're too big.
E.g.: If the label is "Arts Languages and Communication", it should become "Arts Languages.."
You can still see the full label with the tooltip.
Related
I would like to set the color of y-axis tick labels in Chart.js bar and line charts based on the numeric label value. Specifically, I'd like negative values to be rendered red. Additionally rather than displaying "-1", "-2", etc., I'd like to override to display "(1)", "(2)", etc.
I've seen examples for changing tick labels based on index / position, but not conditionally based on the label value. Thanks in advance for any guidance.
You can define the scriptable option scales.x.ticks.color as an array of colors that depend on the corresponding data value each. The following definition for example shows red tick labels for every bar of a value less than 10.
scales: {
x: {
ticks: {
color: data.map(v => v < 10 ? 'red' : undefined)
}
}
}
For further information, consult Tick Configuration from the Chart.js documentation.
Please take a look at below runnable code and see how it works.
const data = [4, 12, 5, 13, 15, 8];
new Chart('myChart', {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
datasets: [{
label: 'Dataset',
data: data,
}]
},
options: {
responsive: false,
scales: {
x: {
ticks: {
color: data.map(v => v < 10 ? 'red' : undefined)
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="myChart" height="180"></canvas>
I'd like to conditionally add a strikethrough to tick labels. As far as I can tell, there's no option to natively do that through Chart.js. Is there a way to hook in through the axes callbacks to add that?
I don't know if that is possible because you are dealing with a canvas element, but you can customize the text in the labels by using the ticks callback as in this example:
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ["One", "Two", "Three", "Four", "Five"],
datasets: [
{
label: "A chart",
backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
data: [2478, 5267, 734, 784, 433]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'A chart with columns and custom vertical labels'
},
scales: {
yAxes: [{
ticks: {
callback: function (value, index, values) {
return index % 2 == 0 ? value : '**' + value + '**';
}
}
}]
}
}
});
Note the callback funcion there, maybe you can use this to give some labels a distinctive text.
The chart of this example looks like this:
Is it possible to define HTML5 data attributes for each dataset value in a Chart.js chart? The goal is to enhance the default tooltip information (e.g. X-axis value & Y-axis value) with additional information related to the target dataset value.
In the example below, a chart is displayed that plots the total number of diapers used by 6 children. When the tooltip displays, it says the name of the child and the number of diapers. I would like the tooltip to display age and gender, as well, and figured the tooltip callback could get these from data attributes attached to each dataset value.
I've reviewed the Chart.js documentation and searched online forums, like StackOverflow, without success.
var myChart = new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['Gabriel', 'Zelie', 'Santiago', 'Serafina', 'Berenice', 'Pia'],
datasets: [{ label: 'Diapers', data: [1050, 1224, 1382, 1166, 1471, 0] }]
},
options: {
legend: { display: false },
scales: { yAxes: [{ ticks: { beginAtZero: true } }] },
title: { display: true, text: 'Total Diapers Used' },
tooltips: {
titleFontSize: 18,
callbacks: {
label: function(tooltipItem, data) {
var defaultLabel = data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel;
var age = "Age: <age>";
var gender = "Gender: <gender>";
var labels = [defaultLabel, age, gender];
return labels;
}
}
}
}
});
</script>
It depends how you structure your data. In my example I made an object that contains all the data.
let dataObject = {
Gabriel: {
diapers: 40,
age: 4
},
// Same structure here...
Zelie: {...},
Santiago: {...},
Serafina: {...},
Berenice: {...},
Pia: {...}
}
This way you can easily access your data in your tooltip with
tooltips: {
callbacks: {
label: function(tooltipItem, data){
return ['Name: '+tooltipItem.label, 'Diapers: '+tooltipItem.value, 'Age: '+dataObject[tooltipItem.label].age]
}
}
}
You should get all the information you need in the jsbin.
https://jsbin.com/qiyeyohavo/1/edit?html,js,output
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've been having a hard time finding documentation that will show me all the possible features on how to control/customize a chart and it's properties.
I wanted to know if i am displaying data in a horizontalBar chart is there a way to get the long label text to wrap? My graph size is affected by that feature and i can't find a way that will allow me to wrap label text.
I also wanted to know is there a property so that i can control the actual width of the graph with bars and not affecting the vertical label width. So i can give more room for the vertical label text and less space for the graph part.
Here is how i am currently rendering my graph:
barChartOptions: any = {
scaleShowVerticalLines: false,
responsive: true,
scales: {
xAxes: [{
ticks: {
beginAtZero:true,
max: 100
}
}],
yAxes: [{
ticks: {
}
}]
},
tooltips:{
mode: 'point'
}
};
barChartLabels: string[] = [];
barChartType: string = 'horizontalBar';
barChartLegend: boolean = false;
barChartData: any[] = [];
data: any;
colorsOverride: Array<Color> = [{
backgroundColor: '#6aaf6a',
hoverBackgroundColor: 'purple'
}];
getChartData(link:string){
this.service.getQuery(link).subscribe(
data => {
this.data = data;
this.barChartLabels = this.data.map(x => x.display);
this.chartData = this.data.map(x => x.value);
this.barChartData = [{data: this.chartData, label:'sample' }];
}
);
}