I have the following mock up of a bar chart. Pretty simple except I can't seem to get the font size on the X axis to increase. I am guessing I am doing something wrong with the hAxis or just using the wrong option.
<script src="Chart.Bundle.min.js" type="text/javascript"></script>
...
<canvas id="myChart" height="220" ></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Break','Lunch','Meeting','Aux Out','Aux In'],
datasets: [{
data: [20, 20, 20, 20, 20],
backgroundColor: [
'rgba(66, 244, 98, 0.9)',
'rgba(101, 3, 96, 0.9)',
'rgba(198, 192, 194, 0.9)',
'rgba(43, 136, 234, 0.9)',
'rgba(232, 11, 55, 0.9)'
],
borderColor: [
'rgba(57,214,86,1)',
'rgba(81, 2, 77, 1)',
'rgba(145, 140, 141, 1)',
'rgba(37, 118, 203, 1)',
'rgba(173, 8, 41, 1)'
],
borderWidth: 2
}]
},
options: {
responsive: true,
legend : {
display: false,
},
hAxis: {
textStyle: {
fontSize: 32
}
}
}
});
</script>
</div>
first, you're using chart.js not google charts
for chart.js, the x-axis label font size options are as follows...
scales: {
xAxes: [{
ticks: {
fontSize: 40
}
}]
}
see following working snippet...
$(document).ready(function() {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Break','Lunch','Meeting','Aux Out','Aux In'],
datasets: [{
data: [20, 20, 20, 20, 20],
backgroundColor: [
'rgba(66, 244, 98, 0.9)',
'rgba(101, 3, 96, 0.9)',
'rgba(198, 192, 194, 0.9)',
'rgba(43, 136, 234, 0.9)',
'rgba(232, 11, 55, 0.9)'
],
borderColor: [
'rgba(57,214,86,1)',
'rgba(81, 2, 77, 1)',
'rgba(145, 140, 141, 1)',
'rgba(37, 118, 203, 1)',
'rgba(173, 8, 41, 1)'
],
borderWidth: 2
}]
},
options: {
responsive: true,
legend : {
display: false,
},
scales: {
xAxes: [{
ticks: {
fontSize: 18
}
}]
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myChart"></canvas>
Related
I've been trying to use the watermark plugin for charts.js. I have successfully downloaded the plugin and uploaded it to Github and created an online version of this file, viewable at: https://cdn.jsdelivr.net/gh/AjaniSt/chartjs-plugin-watermark/chartjs-plugin-watermark.js. However, the plugin is not working. I have tried using a local file instead, putting the "watermark" data in and out of the "plugin" data, and trying the HTML online. However, none have worked. Some guidance would be greatly appreciated. My HTML file is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/AjaniSt/chartjs-plugin-watermark/chartjs-plugin-watermark.js"></script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="250" height="200"></canvas>
<script>
var ctx = document.getElementById("myChart");
var imageNew = new Image()
imageNew.src = 'https://image.shutterstock.com/image-vector/hi-hello-banner-speech-bubble-260nw-1505210795.jpg'
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1880,
1881,
1882,
1883,
1884,
1885,
1886
],
datasets: [{
label: 'Temperature Anomaly',
data: [-0.16,
-0.08,
-0.1,
-0.17,
-0.28,
-0.33,
-0.31
],
fill: true,
backgroundColor: [
'rgba(10, 168, 196, 0.2)',
'rgba(102, 96, 151, 0.2)',
'rgba(57, 87, 255, 0.2)',
'rgba(233, 182, 233, 0.2)',
'rgba(108, 213, 207, 0.2)',
'rgba(125, 178, 230, 0.2)'
],
borderColor: [
'rgba(10, 168, 196, 1)',
'rgba(102, 96, 151, 1)',
'rgba(57, 87, 255, 1)',
'rgba(233, 182, 233, 1)',
'rgba(108, 213, 207, 1)',
'rgba(125, 178, 230, 1)'
],
borderWidth: 1,
pointRadius: 3,
pointHitRadius: 8
}]
},
options: {
scales: {
y: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return value + '°C';
}
},
title: {
display: true,
text: 'Test'
}
}],
xAxes: [{
ticks: {
maxTicksLimit: 15
}
}]
},
plugins:{
legend: {display: false},
watermark: {
x: 0,
y: 0,
height: 50,
width: 50,
alignX: "top",
alignY: "left",
alignToChartArea: true,
position: "front",
opacity: 1,
image: imageNew,
},
},
onClick: handleClick
}
});
window.onmessage = function(event){
if (event.data && Array.isArray(event.data)) {
myChart.data.datasets[0].data = event.data;
myChart.update();
}
else {
console.log("HTML Code Element received a generic message:");
console.log(event.data);
}
};
function handleClick(e){
var activeBars = myChart.getElementAtEvent(e);
var value = myChart.config.data.datasets[activeBars[0]._datasetIndex].data[activeBars[0]._index];
var label = activeBars[0]._model.label;
window.parent.postMessage({
"type":"click",
"label":label,
"value":value
} , "*");
}
function ready(){
window.parent.postMessage({"type":"ready"}, "*");
}
</script>
</body>
</html>
What looks like the main reason that it's not working is because this plugin was written for V2 and you are using V3, the way you register plugins has changed so you need to change this line which can be found at the bottom of the file: Chart.pluginService.register(watermarkPlugin); to this: Chart.register(watermarkPlugin)
Since this question was posted, chartjs-plugin-watermark 2.0.0 has been released and supports Chart.js 3 and 4. Additionally, the watermark config should be moved from options.plugins.watermark to just options.watermark:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/AlbinoDrought/chartjs-plugin-watermark/chartjs-plugin-watermark.js"></script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="250" height="200"></canvas>
<script>
var ctx = document.getElementById("myChart");
var imageNew = new Image()
imageNew.src = 'https://image.shutterstock.com/image-vector/hi-hello-banner-speech-bubble-260nw-1505210795.jpg'
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1880,
1881,
1882,
1883,
1884,
1885,
1886
],
datasets: [{
label: 'Temperature Anomaly',
data: [-0.16,
-0.08,
-0.1,
-0.17,
-0.28,
-0.33,
-0.31
],
fill: true,
backgroundColor: [
'rgba(10, 168, 196, 0.2)',
'rgba(102, 96, 151, 0.2)',
'rgba(57, 87, 255, 0.2)',
'rgba(233, 182, 233, 0.2)',
'rgba(108, 213, 207, 0.2)',
'rgba(125, 178, 230, 0.2)'
],
borderColor: [
'rgba(10, 168, 196, 1)',
'rgba(102, 96, 151, 1)',
'rgba(57, 87, 255, 1)',
'rgba(233, 182, 233, 1)',
'rgba(108, 213, 207, 1)',
'rgba(125, 178, 230, 1)'
],
borderWidth: 1,
pointRadius: 3,
pointHitRadius: 8
}]
},
options: {
scales: {
y: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return value + '°C';
}
},
title: {
display: true,
text: 'Test'
}
}],
xAxes: [{
ticks: {
maxTicksLimit: 15
}
}]
},
plugins:{
legend: {display: false},
},
watermark: {
x: 0,
y: 0,
height: 50,
width: 50,
alignX: "top",
alignY: "left",
alignToChartArea: true,
position: "front",
opacity: 1,
image: imageNew,
},
onClick: handleClick
}
});
window.onmessage = function(event){
if (event.data && Array.isArray(event.data)) {
myChart.data.datasets[0].data = event.data;
myChart.update();
}
else {
console.log("HTML Code Element received a generic message:");
console.log(event.data);
}
};
function handleClick(e){
var activeBars = myChart.getElementAtEvent(e);
var value = myChart.config.data.datasets[activeBars[0]._datasetIndex].data[activeBars[0]._index];
var label = activeBars[0]._model.label;
window.parent.postMessage({
"type":"click",
"label":label,
"value":value
} , "*");
}
function ready(){
window.parent.postMessage({"type":"ready"}, "*");
}
</script>
</body>
</html>
I'm using vue-chartjs in my nuxt.js project. I have line chart and I want to draw vertical line while hovering like this example. Below chart options.
The problem is that I could not integrate code from the example with vue. Thanks in advance))
WeatherChart.vue
<script>
import { Line } from 'vue-chartjs'
export default {
extends: Line,
props: {},
data() {
return {
options: {
responsive: true,
maintainAspectRatio: false,
legend: false,
tooltips: {
enabled: false,
mode: 'x',
intersect: false,
xPadding: 14,
yPadding: 14,
position: 'nearest',
custom: (tooltipModel) => {
// Tooltip Element
let tooltipEl = document.getElementById('chartjs-tooltip')
//There some options
},
},
},
}
},
mounted() {
this.renderChart(
{
labels: this.labels,
datasets: [
{
label: 'Kunduzi',
borderColor: 'rgba(0, 195, 137, 1)',
pointBackgroundColor: 'rgba(0, 195, 137, 1)',
borderWidth: 3,
pointBorderColor: 'rgba(0, 195, 137, 1)',
backgroundColor: 'rgba(226, 255, 246, 0.5)',
data: this.dataDay,
fill: '+1',
},
{
label: 'Kechasi',
borderColor: 'rgba(19, 133, 250, 1)',
pointBackgroundColor: 'rgba(19, 133, 250, 1)',
pointBorderColor: 'rgba(19, 133, 250, 1)',
borderWidth: 3,
backgroundColor: 'rgba(212, 234, 255, 0.5)',
data: this.dataNight,
},
],
},
this.options
)
},
}
</script>
I have the following horizontal bar chart
<template>
<div>
<canvas id="myChart" width="100" height="100"></canvas>
</div>
</template>
<script>
import Chart from 'chart.js';
export default {
data() {
return {
ctx: null,
chart: null,
}
},
mounted() {
this.ctx = document.getElementById('myChart');
this.chart = new Chart(this.ctx, {
type: 'horizontalBar',
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
categoryPercentage: 0.4,
label: 'Stars',
data: [15, 28, 34, 48, 100],
backgroundColor: [
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
],
}]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
categoryPercentage: 0.4
}]
}
}
});
}
}
</script>
I want to reduce the spacing between one bar and the other (not eliminate it, just reduce it), but I don't know how to do this, if I use the categoryPercentage prop it does about the same as barPercentage, just reduces the size of the bar itself but not the distance between each bar.
This is how is looking right now
If possible I would also have the chart in a blank canvas too
The bar width is influenced through the options barPercentage and categoryPercentage, which both need to be defined on the dataset.
To find out about the relationship between barPercentage and categoryPercentage, see here.
Please take a look at your amended runnable code below:
new Chart('myChart', {
type: 'horizontalBar',
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
barPercentage: 0.9,
categoryPercentage: 1,
label: 'Stars',
data: [15, 28, 34, 48, 100],
backgroundColor: [
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)',
'rgba(178, 140, 129, 0.2)'
],
}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
In case you simply want to see the existing bars closer to each other, you need to change the height of the chart. This can be done directly on the canvas through the height attribute. Alternatively you may also enclose the canvas in a div that has its dimensions defined by some CSS.
I create a chart using chartjs, how do I display the pediactric to be visible horizontally bar?
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Interna", "Pediatric", "Obygn", "Surgical"],
datasets: [{
label: '100% of Votes',
data: [80, 55, 60, 70],
backgroundColor: [
'rgba(150, 99, 132, 0.6)',
'rgba(180, 99, 132, 0.6)',
'rgba(210, 99, 132, 0.6)',
'rgba(240, 99, 132, 0.6)'
],
borderColor: [
'rgba(150, 99, 132, 1)',
'rgba(180, 99, 132, 1)',
'rgba(210, 99, 132, 1)',
'rgba(240, 99, 132, 1)'
],
borderWidth: 2,
hoverBorderWidth: 0
}]
},
options: {
The x-axis scale begins at 55. Since the value of Pediatric is 55 no bar is visible.
Set the following option to have the scale always begin at zero:
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
I'm new in Chart JS and I'm trying to add the maximum values for each dataset inside the legend. I've tried using legendCallback :
HTML:
<canvas id="lineChart"></canvas>
Javascript:
var ctx = document.getElementById("lineChart");
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['1','2','3','4','5','6','7','8','9','10'],
datasets: [{
label: "Max",
backgroundColor: "rgba(235, 70, 70, 0.31)",
borderColor: "rgba(231, 25, 25, 0.7)",
pointBorderColor: "rgba(231, 25, 25, 0.7)",
pointBackgroundColor: "rgba(231, 25, 25, 0.7)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointBorderWidth: 1,
data: [31, 74, 6, 39, 20, 85, 7, 80, 35, 70]
}, {
label: "Avg",
backgroundColor: "rgba(255, 255, 111, 0.3)",
borderColor: "rgba(255, 255, 50, 0.70)",
pointBorderColor: "rgba(255, 255, 50, 0.70)",
pointBackgroundColor: "rgba(255, 255, 50, 0.70)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(151,187,205,1)",
pointBorderWidth: 1,
data: [82, 23, 66, 9, 99, 4, 2, 25, 67, 20]
},
{
label: "Min",
backgroundColor: "rgba(90, 189, 90, 0.3)",
borderColor: "rgba(50, 173, 50, 0.70)",
pointBorderColor: "rgba(50, 173, 50, 0.70)",
pointBackgroundColor: "rgba(50, 173, 50, 0.70)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(151,187,205,1)",
pointBorderWidth: 1,
data: [30, 46, 60, 29, 79, 54, 23, 25, 47, 10]
}]
},
options: {
legend: {
display: true,
position: 'bottom'
},
legendCallback: function(chart) {
return 'a';
},
scales: {
xAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}]
}
}
});
but the displayed legend didn't changed. I've searched for some answers and I also tried using: lineChart.generateLegend(); but still no result.
It is possible to add the maximum value for each dataset inside legend?
Thanks in advance!
Yes, it is possible to show the max value for each dataset inside the legend. You can use the legend.labels.generateLabels config property to do this.
This property allows you to define your own function that generates the legend labels. To add the max, we simply iterate through each dataset's data array, find the max, and build it into the label string.
Here is an example configuration. The magic happens when we set the text property in the return.
legend: {
display: true,
position: 'bottom',
labels: {
generateLabels: function(chart) {
var data = chart.data;
return Chart.helpers.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {
return {
text: dataset.label + " (Max Value: " + Chart.helpers.max(dataset.data).toLocaleString() + ")",
fillStyle: (!Chart.helpers.isArray(dataset.backgroundColor) ? dataset.backgroundColor : dataset.backgroundColor[0]),
hidden: !chart.isDatasetVisible(i),
lineCap: dataset.borderCapStyle,
lineDash: dataset.borderDash,
lineDashOffset: dataset.borderDashOffset,
lineJoin: dataset.borderJoinStyle,
lineWidth: dataset.borderWidth,
strokeStyle: dataset.borderColor,
pointStyle: dataset.pointStyle,
// Below is extra data used for toggling the datasets
datasetIndex: i
};
}, this) : [];
},
},
},
I also created a codepen to demonstrate this.