I have my chat.js title as
new Chart(document.getElementById(z).getContext('2d'), {
type: 'doughnut',
data: {
datasets: [{
backgroundColor: $scope.bgColor,
data: [
some stuff
]
}],
labels: [some stuff],
},
options: {
title: {
display: true,
text: ['Title Line One', 'Title Line Two']
},
cutoutPercentage: 80,
hover: {mode: null},
elements: {
center: {
text: [
some stuff ],
color: '#FF6384', // Default is #000000
fontStyle: 'Arial', // Default is Arial
}
},
legend: {
display: false
},
}
});
however the title is not coming in two lines , the documentation here says that an array input will give multiline title , which it is not clearly giving
Your example should work fine. Make sure the rest of the code is formatted correctly as well.
Here is a working example:
https://codepen.io/ItsT-Mo/pen/rPNrGm
(The title is defined in Line 12)
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['One', 'Two', 'Three'],
datasets: [{
label: 'Testdata',
data: [1, 2, 3]
}]
},
options: {
title: {
display: true,
text: ['Title Line One', 'Title Line Two']
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
If it still doesn't work, inspect the page and make sure both lines are in the DOM.
If they are but not both are shown, then one line of the title might be obscured by some CSS.
Make sure that you're using Chart.js version 2.7.0 or higher.
Chart.js version 2.6.0 does not have this feature.
Chart.js version 2.7.0 does.
Related
In my code below, I am able to draw a Treemap and also display the tag in each tree cell. But I want to add some custom text next to my tag,
Like say I want the word 'Language' to appear in each tree map cell. I tried the formatter options, But its not working for the version of chart.js I am using. Kindly provide me a solution for the specific version I am using. Since I have multiple other charts defined and changing the version would cause issues.
var topTags = [
{tag:'android',num:42657},{tag:'reactjs',num:38844},{tag:'php',num:34381},{tag:'sql',num:29996},
];
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: ['tag'],
spacing: 0.5,
borderWidth: 1.5,
fontColor: "black",
borderColor: "grey"
}]
},
options: {
maintainAspectRatio: false,
legend: { display: false },
tooltips: { enabled: false }
}
});
CHART.JS AND TREEMAP VERSION :
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap#0.2.3"></script>
The formatter option only got added in version 2 of the treemap chart type, the scriptable option is only available in version 1 so the best way for you to get the extra text is by editing your original data array first and adding the text to it that way like so:
let topTags = [{
tag: 'android',
num: 42657
}, {
tag: 'reactjs',
num: 38844
}, {
tag: 'php',
num: 34381
}, {
tag: 'sql',
num: 29996
}, ];
topTags = topTags.map(e => ({
num: e.num,
tag: `Lang: ${e.tag}`
}))
const canvas = document.getElementById("chart");
const ctx = canvas.getContext("2d");
const chart = window.chart = new Chart(ctx, {
type: "treemap",
data: {
datasets: [{
tree: topTags,
key: "num",
groups: ['tag'],
spacing: 0.5,
borderWidth: 1.5,
fontColor: "black",
borderColor: "grey",
}]
},
options: {
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
enabled: false
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap#0.2.3"></script>
<canvas id="chart"></canvas>
How can I add these styles to my graph? I'm having trouble finding it in the documentation for it, and the other forums aren't very helpful. I am using Flask for the backend, so that's why the data values look like that.
Labels on top of bars
Change font size on both axis
Set y scale as a fixed value (0,8)
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var options = {
scales: {
yAxes: [{
ticks: {
fontSize: 40
}
}]
}
}
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Lithium Battery', 'Other Mfg', 'Delivery', 'Tailpipe', 'Fuel Cycle', 'Disposal', 'Total'],
datasets: [{
label: 'ICEV CAR (MTCO2e/Year)',
labels: [
"{{data['battery_icev_car']}}",
"{{data['other_mfg_icev_car']}}",
"{{data['delivery_icev_car']}}",
"{{data['tailpipe_icev_car']}}",
"{{data['fuel_cycle_icev_car']}}",
"{{data['disposal_icev_car']}}",
"{{data['total_icev_car']}}"
],
data: [ /* errors are normal, fixes when server ru
[0, {{data['y1_icev']}}],
[{{data['y1_icev']}}, {{data['y2_icev']}}],
[{{data['y2_icev']}}, {{data['y3_icev']}}],
[{{data['y3_icev']}}, {{data['y4_icev']}}],
[{{data['y4_icev']}}, {{data['y5_icev']}}],
[{{data['y5_icev']}}, {{data['y6_icev']}}],
[0, {{data['y6_icev']}}]
],
backgroundColor: [
'rgba(0,0,0,0.9)'
],
borderColor: [
'rgba(0,0,0,1)'
],
borderWidth: 1,
borderSkipped: false
}]
},
options: {
responsive: true,
plugins: {
legend: {
labels: {
// This doesn't work on axis
font: {
size: 20
}
}
}
},
y: {
beginAtZero: true
}
}
});
</script> </script>
Since your config is not working I assume you are using V3, in which case the solution is as followed:
For point one you need to use an external plugin, you can write your own or use the datalabels plugin
For your second problem you need to style it as a font object as told in the documentation like so:
options: {
scales: {
y:{
ticks:{
font:{
size: 50
}
}
}
}
}
For your last part you can set the stepSize to 0.8
How can I create a stacked column chart with dynamic data?
For example, I have an external JSON object like:
[
{
id : ‘ID123’,
occurrences: [5,6,8],
description: ["Hours spent working", "Hours spent skiing", "Hours spent studying"]
},
{
id : ‘ID456’,
occurrences: [7,2,12],
description: ["Hours spent working", "Hours spent skiing", "Hours spent studying"]
}
]
How do I make it so there would be two stacked columns using the id as the label and the array of occurrences is used to build the stacked column on top of each label?
Edit:
Added representation of how graph should look
I would suggest using chart.js for this as it will be much easier than building it out yourself. Here is a example using the data you provided.
var barChartData = {
labels: ['ID123', 'ID456'],
datasets: [{
label: 'Hours spent working',
backgroundColor: '#FF0000',
data: [
5,
7
]
}, {
label: 'Hours spent skiing',
backgroundColor: '#00FF00',
data: [
6,
2
]
}, {
label: 'Hours spent studying',
backgroundColor: '#0000FF',
data: [
8,
12,
]
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>
My React app uses react-chartjs-2 (which in turn uses the latest Chart.js 2.7.2). I'm trying to create stacked line charts with a differently styled section between the second-to-last and last x-axis labels, as shown in this example:
How can this be accomplished?
I solved it myself by separating the stacked line data into 2 datasets, to plot as separate stacked plots on the same figure/axes (by including the 2 separate datasets in a single chart's data object).
#Izzi (from comment) here is example:
Link with examle: https://www.chartjs.org/docs/latest/samples/area/line-boundaries.html
Paste this config into editor on the website linked above:
data
const data = {
labels: generateLabels(),
datasets: [
{
label: 'Data A',
data: [40.96,89.06,65.46,45.46,89.55,54.52,71.24,89.1],
borderColor: Utils.CHART_COLORS.red,
backgroundColor: Utils.CHART_COLORS.red,
// look at this setting
fill: 'origin'
},
{
label: 'Data B',
data: [20.96,65.06,15.46,34.46,53.55,24.52,31.24,59.1],
borderColor: Utils.CHART_COLORS.blue,
backgroundColor: Utils.CHART_COLORS.blue,
fill: 'origin'
},
{
label: 'Data C',
data: [20.96,65.06,15.46,34.46,53.55,24.52,31.24,59.1],
borderColor: Utils.CHART_COLORS.green,
backgroundColor: Utils.CHART_COLORS.green,
fill: 'origin'
}
]
};
config
const config = {
type: 'line',
data: data,
options: {
scales: {
y: {
// look at this setting
stacked: true,
}
},
plugins: {
filler: {
propagate: false,
},
title: {
display: true,
text: (ctx) => 'Fill: ' + ctx.chart.data.datasets[0].fill
}
},
interaction: {
intersect: false,
}
},
};
I'm creating charts using Chart.js and I want to show the labels for the bars in the legend, not the title of the dataset (there is only one), please see the below image as an example:
My current legend just looks like this:
I have looked through the docs but to no avail, I found them very confusing actually.
Here is my current code:
var chart_0 = new Chart($('#cp_chart_0'), {
type: 'bar'
, data: {
labels: ['Blue','Green','Yellow','Red','Purple','Orange']
, datasets: [{
label: 'Dataset 1'
, borderWidth: 0
, backgroundColor: ['#2C79C5','#7FA830','#7B57C3','#ED4D40','#EC802F','#1DC6D3']
, data: ['12','2','5','0','9','1']
}]
}
});
Thanks!
In one of the most recent releases of Chart.js 2.1.x, they added back this functionality. So go get the latest release first. Then insert the code below.
It is located under the options and legend. Here is how you use it:
options: {
legend: {
position: 'right'
}
}
Easiest way is to provide your data with multiple sets :
data: {
labels: ['total votes']
, datasets: [{
label: 'Blue'
, backgroundColor: ['#2C79C5']
, data: ['12']
},{
label: 'Green'
, backgroundColor: ['#7FA830']
, data: ['2']
},
...
]
}
But you can generate a custom labels using generateLabels - http://www.chartjs.org/docs/#chart-configuration-legend-configuration
Or even customise the whole legend, including formatting, with legendCallback - http://www.chartjs.org/docs/#chart-configuration-common-chart-configuration
This solution uses Chart.js version 3. You can pre-process your data using the Plugin Core API. The API offers different hooks that may be used for executing custom code.
I use the beforeInit hook to create individual datasets for each defined label/value pair. Note that the data of these new datasets are defined in point format (for instance [{ x: 1, y: 12 }]):
beforeInit: chart => {
let dataset = chart.config.data.datasets[0];
chart.config.data.datasets = chart.config.data.labels.map((l, i) => ({
label: l,
data: [{ x: i + 1, y: dataset.data[i] }],
backgroundColor: dataset.backgroundColor[i],
categoryPercentage: 1
}));
chart.config.data.labels = undefined;
}
Further you need to define a second x-axis that will contain the labels.
x1: {
offset: true,
gridLines: {
display: false
}
}
The labels on x1 need to be collected and defined programmatically each time the hidden state of a dataset changes. This can be done in the beforeLayout hook.
beforeLayout: chart => chart.options.scales.x1.labels = chart.config.data.datasets.filter((ds, i) => !chart.getDatasetMeta(i).hidden).map(ds => ds.label)
Please take a look at below runnable code and see how it works.
new Chart('chart', {
type: 'bar',
plugins: [{
beforeInit: chart => {
let dataset = chart.config.data.datasets[0];
chart.config.data.datasets = chart.config.data.labels.map((l, i) => ({
label: l,
data: [{ x: i + 1, y: dataset.data[i] }],
backgroundColor: dataset.backgroundColor[i],
categoryPercentage: 1
}));
chart.config.data.labels = undefined;
},
beforeLayout: chart => chart.options.scales.x1.labels = chart.config.data.datasets.filter((ds, i) => !chart.getDatasetMeta(i).hidden).map(ds => ds.label)
}],
data: {
labels: ['Blue', 'Green', 'Yellow', 'Red', 'Purple', 'Orange'],
datasets: [{
data: ['12', '2', '5', '0', '9', '1'],
backgroundColor: ['#2C79C5', '#7FA830', '#FFF200', '#ED4D40', '#800080', '#EC802F']
}]
},
options: {
interaction: {
intersect: true,
mode: 'nearest'
},
plugins: {
legend: {
position: 'right'
},
tooltip: {
callbacks: {
title: () => undefined
}
}
},
scales: {
y: {
beginAtZero: true
},
x: {
display: false
},
x1: {
offset: true,
gridLines: {
display: false
}
}
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
<canvas id="chart" height="120"></canvas>