I'm using ChartJS version 2.6.0. and I'm having some difficulties with the 'title' option of the chart. It's simply not showing on the rendered chart.
I'm following the documentation, and passing the title in as described:
var options = {
type: 'line',
data: data,
title: {
display: true,
text: 'PLEASE DISPLAY FOR HEAVEN\'S SAKE'
},
responsive: true,
bezierCurve: true,
legend: {
display: true,
labels: {
fontColor: 'rgb(255, 99, 132)'
}
},
pointHitDetectionRadius: 1,
events: ['click']
}
var canvas = document.getElementById("chartId");
var ctx = canvas.getContext("2d");
var chart = new Chart(ctx, options);
However, the title simply wont show. Here is a fiddle with a dougnut chart, that has the same issue. What am I missing here?
You need to wrap the title object inside an options object like
var myChart = new Chart(ctx, {
type: 'doughnut',
options: {
plugins: {
title: {
display: true,
text: 'TEST'
}
}
}
....
Here are the docs for a full list of all the options, chartjs:title
var data = [2137680, 6282693, 805566, 2568163, 598599, 3189284, 599112, 926340, 5548295, 11847685, 66445];
var labels = ["Management", "Finance", "Human Resources", "Business Development and Marketing", "Information Technology", "Professional Development and Training", "Knowledge Management", "Logistics", "Support", "Business Services", "Other"];
var bgColor = ["#878BB6", "#FFEA88", "#FF8153", "#4ACAB4", "#c0504d", "#8064a2", "#772c2a", "#f2ab71", "#2ab881", "#4f81bd", "#2c4d75"];
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
options: {
title: {
display: true,
text: 'TEST'
}
},
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: bgColor
}]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400">
</canvas>
https://jsfiddle.net/unf4exa2/
Please try adding options object inside for title
https://jsfiddle.net/Jaffreena/ha19ozqy/93/
var data = [2137680, 6282693, 805566, 2568163, 598599, 3189284, 599112, 926340, 5548295, 11847685, 66445];
var labels = ["Management", "Finance", "Human Resources", "Business Development and Marketing", "Information Technology", "Professional Development and Training", "Knowledge Management", "Logistics", "Support", "Business Services", "Other"];
var bgColor = ["#878BB6", "#FFEA88", "#FF8153", "#4ACAB4", "#c0504d", "#8064a2", "#772c2a", "#f2ab71", "#2ab881", "#4f81bd", "#2c4d75"];
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: bgColor
}]
},
options: {
title: {
display: true,
text: 'Custom Chart Title'
}
}
});
You need to wrap the title object inside the plugins object and then plugins inside options.
Version: 3.7.1
var myChart = new Chart(ctx, {
type: 'doughnut',
options: {
plugins:{
title: {
display: true,
text: 'Title'
}
}
}
This will surely work!
Your title property should come inside another property called options. Try this.
options : {
title: {
display: true,
text: 'TITLE HERE'
}
}
You can check for some examples here as well.
You should import the Title first:
import { Chart as ChartJS, ArcElement, Tooltip, Legend, Title } from 'chart.js';
and then add your Tile to your Register:
ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels, Title);
finally use your title in options.plugins:
const options: any = {
plugins: {
title: {
display: true,
text: "Your Title",
},
}
}
In your JSFiddle, you forgot to add options.
The example in the documentation is:
options: {
title: {
display: true,
text: 'Custom Chart Title'
}
},
See this fiddle: https://jsfiddle.net/ha19ozqy/90/
Related
I have defined two charts below for example. But I use more than 50 charts in my code.
The difference between both charts are: chartNumber, containerNumber, id, text and data. Also the condition that is used for checking each chart at the beginning.
Working fiddle of the same: https://jsfiddle.net/2s93zb4j/12/ (pls check all 3 charts to view all of them)
Instead of repeating same lines of code for each chart, will I be able to reduce the number of lines using for loop or forEach. Thank you.
//Chart1
if (checkNA=== "NA")
chart0 = Highcharts.chart('container1', {
id: 1,
yAxis: [{
title: {
text: 'NorthAmerica'
}
}],
series: [{
data: NorthAmericaData,
type: 'line',
}],
});
}
//Chart2
if (checkSA=== "SA")
chart1 = Highcharts.chart('container2', {
id: 2,
yAxis: [{
title: {
text: 'SouthAmerica'
}
}],
series: [{
data: SouthAmericaDta,
type: 'line',
}],
});
}
A class would go a long way here.
class ChartObject {
constructor(id, text, data) {
this.id = id;
this.yAxis = [
{
title: {
text,
},
},
];
this.series = [
{
data,
type: 'line',
},
];
}
}
//Chart1
if (checkNA === 'NA') {
chart0 = Highcharts.chart(
'container1',
new ChartObject(1, 'NorthAmerica', NorthAmericaData)
);
}
//Chart2
if (checkSA === 'SA') {
chart1 = Highcharts.chart(
'container2',
new ChartObject(2, 'SouthAmerica', SouthAmericaDta)
);
}
Hope this helps.
Hi there I am stuck in chat.js horizontal bar graph. Here is the JS script that is populating a horizontal bar chart perfectly. Now what I want is to add link on these horizontal bar stacks. Whenever I click a particular bar stack the user should be directed to that link.
var ctx = document.getElementById('qr_tagging_data');
ctx.height = 160;
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Total Tagged','Center Zone','North Zone','South Zone'],
datasets: [{
data: ['21500','5000','10000','6500'],
backgroundColor: [
'#53B63C', '#E8A412', '#128BE8', '#648fbb'
],
hoverOffset: 3
}]
},
plugins: [ChartDataLabels],
options: {
indexAxis: 'y',
responsive: true,
plugins: {
legend: {
display: false
},
datalabels: {
font: {
weight: 'bold',
size: '15'
}
}
}
},
});
function clickHandlerZones(evt) {
const points = myChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
if (points.length) {
alert(points.length);
const firstPoint = points[0];
const label = myChart.data.labels[firstPoint.index];
const value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
window.open('google.com','_blank');
}
}
ctx.onclick = clickHandlerZones;
I have populated another chart.js graph but it is vertical bar graph and the bars are perfectly redirected whenever a user clicks on the vertical bar graph. I am pasting the code of vertical bar graph too for reference and suggestions.
var ctx = document.getElementById('hospital_data');
ctx.height = 300;
var myChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
data: <?php echo $hospitals_data?>,
backgroundColor: [<?php echo $legend_colors?>],
hoverOffset: 3
}]
},
plugins: [ChartDataLabels],
options: {
parsing:{
xAxisKey: 'hospital_name',
yAxisKey: 'tagging_count'
},
responsive: true,
plugins: {
legend: {
display: false
},
datalabels: {
formatter: function (value) {
return value['tagging_count'];
},
anchor: 'end',
align: 'top',
font: {
weight: 'bold',
size: '11'
}
}
}
}
});
function clickHandler(evt) {
const points = myChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
if (points.length) {
const firstPoint = points[0];
const label = myChart.data.labels[firstPoint.index];
const value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
window.open('google.com','_blank');
}
}
ctx.onclick = clickHandler;
can someone guide how do I fix this horizontal bar stacks clickable functionality. The links are applied on the numbers i.e. (5000,10000,15000,20000,25000 on x-axis) rather they should be applied to each horizontal stack.
I am using chart.js to develop a TreeMap. It works great but the issue is each rectangle only shows the value of the data. I want to add some custom text next to the value. How do I achieve this?
var topTags = [
{tag:'python',num:133269},{tag:'javascript',num:109742},{tag:'java',num:65490},{tag:'c#',num:45445},{tag:'html',num:43767},{tag:'android',num:42657},{tag:'reactjs',num:38844},{tag:'php',num:34381},{tag:'sql',num:29996},{tag:'python',num:29942},{tag:'css',num:29654},{tag:'r',num:28319},{tag:'c++',num:27389},{tag:'node.js',num:25415},{tag:'angular',num:24093},{tag:'pandas',num:23826},{tag:'arrays',num:23075},{tag:'jquery',num:18968},{tag:'mysql',num:18863},{tag:'swift',num:17971},{tag:'ios',num:17600},{tag:'json',num:15589},{tag:'laravel',num:15537},{tag:'flutter',num:15201},{tag:'c',num:15195},{tag:'django',num:14748},{tag:'sql',num:12752},{tag:'reactjs',num:10974},{tag:'excel',num:10962},{tag:'list',num:10726},{tag:'regex',num:10676}
];
var canvas = document.getElementById("treemap");
var ctx = canvas.getContext("2d");
var chart = window.chart = new Chart(ctx, {
type: "treemap",
data: {
datasets: [{
tree: topTags,
key: "num",
groups: ['num'],
spacing: 0.5,
borderWidth: 1.5,
fontColor: "black",
borderColor: "grey"
}]
},
options: {
maintainAspectRatio: false,
legend: { display: false },
tooltips: { enabled: false }
}
});
When running this code, I get the numbers in each rectangle but I need some text to be appended next to the numbers for each rectangle. How do I achieve this?
You can use the formatter options in the labels section:
const options = {
type: 'treemap',
data: {
datasets: [{
label: '# of Votes',
tree: [12, 19, 3, 5, 2, 3],
backgroundColor: 'pink',
labels: {
display: true,
formatter(ctx) {
const data = ctx.chart.data;
return `Custom Text: ${data.datasets[ctx.datasetIndex].tree[ctx.dataIndex]}`;
}
},
}]
},
options: {}
}
const 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.7.0/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap#2.0.1/dist/chartjs-chart-treemap.js"></script>
</body>
I use chart.js 2.8 and chartjs-plugin-annotation.js
I have a bar type chart.
My labels are : [1.0 - 2.8], [2.8 - 4.6], [6.4 - 8.2], [8.2 - 10.0]
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: "bar",
data: {
labels: labels,
datasets: [{
data: datas
}]
},
options: {
annotation: {
annotations: [{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: "2.8 - 4.6", //value must be equal a label :(
borderColor: "red",
label: {
content: "TODAY",
enabled: true,
position: "top"
}
}]
}
}
});
I want the vertical line to be drawn at exactly on 2.4 point. But the vertical line can be drawn only at the label value. How can i fix this?
Just wondering if there is any way to set the horizontal bar labels for y-axis using chart.js. Here is how I set up the chart:
<div class="box-body">
<canvas id="chart" style="position: relative; height: 300px;"></canvas>
</div>
Javascript:
var ctx = document.getElementById('chart').getContext("2d");
var options = {
layout: {
padding: {
top: 5,
}
},
responsive: true,
animation: {
animateScale: true,
animateRotate: true
},
};
var opt = {
type: "horizontalBar",
data: {
labels: label,
datasets: [{
data: price,
}]
},
options: options
};
if (chart) chart.destroy();
chart= new Chart(ctx, opt);
chart.update();
As you all can see, the first and third labels are too long and cut off. Is there a way to make the label multi-line?
If you want to have full control over how long labels are broken down across lines you can specify the breaking point by providing labels in a nested array. For example:
var chart = new Chart(ctx, {
...
data: {
labels: [["Label1 Line1:","Label1 Line2"],["Label2 Line1","Label2 Line2"]],
datasets: [{
...
});
You can use the following chart plugin :
plugins: [{
beforeInit: function(chart) {
chart.data.labels.forEach(function(e, i, a) {
if (/\n/.test(e)) {
a[i] = e.split(/\n/);
}
});
}
}]
add this followed by your chart options
ᴜꜱᴀɢᴇ :
add a new line character (\n) to your label, wherever you wish to add a line break.
ᴅᴇᴍᴏ
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['Jan\n2017', 'Feb', 'Mar', 'Apr'],
datasets: [{
label: 'BAR',
data: [1, 2, 3, 4],
backgroundColor: 'rgba(0, 119, 290, 0.7)'
}]
},
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
},
plugins: [{
beforeInit: function(chart) {
chart.data.labels.forEach(function(e, i, a) {
if (/\n/.test(e)) {
a[i] = e.split(/\n/);
}
});
}
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>