I've partially implemented ChartJS in a project, but I can't figure out how to change the font that's displayed on the X and Y axes of a bar chart.
I've read the ChartJS documentation, searched for examples on GitHub, etc. I'm not sure what I'm doing wrong, but I rest assured knowing the solution will involve a line of code and will be a startlingly stupid oversight on my part.
This code draws the chart I want, but with the default font:
var barChartLanguage = Chart.Bar(myCanvas, {
data: dataLanguages,
options: options,
defaults: defaults
});
I tried changing the font in the defaults without success:
var defaults = {
global: {
// example font
defaultFontFamily: "'Raleway'"
}
};
And I tried changing it on the axis with options:
var options = {
animation: {
duration: 2000
},
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMin: 0, // minimum will be 0, unless there is a lower value.
// OR //
beginAtZero: true, // minimum value will be 0.
suggestedMax: 10
},
gridLines: {
display: false
},
pointLabels: {
fontFamily: "'Raleway'"
}
}],
xAxes: [{
gridLines: {
display: false
}
}],
},
};
Add ticks.fontFamily to xAxes so it will look like this:
xAxes: [{
gridLines: {
display: false
},
ticks: {
fontFamily: "Verdana",
}
}],
Documentation: http://www.chartjs.org/docs/#scales
Example on jsfiddle: http://jsfiddle.net/4asLpwd5/
From version 3.x, onwards the syntax was changed.
Chart.js migration guide: 3.x Migration Guide
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: chartData,
options: {
responsive: true,
plugins: {
legend: {
display: false,
}
},
scales: {
x: {
grid: {
display: false
},
ticks: {
font: {
family: 'Raleway', // Your font family
size: 14,
},
},
},
y: {
beginAtZero: true,
ticks: {
font: {
family: 'Raleway', // Your font family
size: 14,
},
// Include a dollar sign in the ticks
callback: function (value, index, values) {
return '$' + value;
},
},
}
}
}
});
Related
I need to retrieve multiple datapoints from my JSON file and display them on the graph. However, it becomes jumbled around the x-axis, and becomes thin. How do I space these out?
I have
Graph
[
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true,
padding: 50
},
x: {
offset: true,
ticks: {
stepSize: 50,
fixedStepSize: 50,
}
}
},
plugins: {
title: {
display: true,
text: 'Worm Egg Count'
},
}
}
};
]2
I have a chart using chart.js, it's a simple line, and if I hover over the line everything is correct, a circle shows on the point and the tool tip appears.
Now I also wanted that when the user hovers on the X-axis, it would select the circle and show the tooltip for the value at that X-axis point.
So I added this:
tooltips: {
intersect: false,
mode: "index"
}
and it works correctly, now if I hover on the X-axis I'll get the tooltip on my line, but one thing that doesn't work is, I dont get the "circle" on my line, only the tooltip!
I get the circle only if I hover directly on the line, here 2 images so you can see the difference:
in the above image I'm hovering directly on the line, and it shows the Circle and the tooltip
in this image instead I'm hovering on the X-axis and as you can see, it will display only the tooltip on my line, but not the circle!
How can I display the circle even when not hovering directly?
thank you
EDIT: added more code:
ngOnInit(): void {
this.ctx = this.myChartRef.nativeElement.getContext("2d");
this.canvas = new Chart(this.ctx, {
type: "scatter",
data: {
labels: [],
datasets: [
{
label: "Grade",
data: [],
borderColor: "#3cba9f",
fill: false,
pointHitRadius: 10,
showLine: true
}
]
},
options: {
responsive: true,
maintainAspectRatio: true,
elements: {
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 8
}
},
tooltips: {
displayColors: false,
intersect: false,
enabled: true,
mode: "index",
callbacks: {
afterBody: function([tooltipItem], data): any {
const multistringText = ["Points: " + tooltipItem.xLabel];
multistringText.push("Grade: " + tooltipItem.yLabel);
return multistringText;
},
label: function(tooltipItem, data): any {
return;
}
}
},
layout: {
padding: {
top: 12
}
},
legend: {
display: false
},
scales: {
gridLines: {
drawBorder: false
},
xAxes: [
{
ticks: {
beginAtZero: false,
maxTicksLimit: 8,
stepSize: 5,
callback: function(value, index, values): any {
if (Math.floor(value) === value) {
return value;
}
if (value % 5 === 0) {
return value;
}
}
},
scaleLabel: {
display: false
}
}
],
yAxes: [
{
ticks: {
beginAtZero: false,
min: 1,
max: 6
},
scaleLabel: {
display: false
}
}
]
}
}
});
}
As you can see below with the canvas element highlighted, there is considerable whitespace below the x axis label. If I resize the canvas, the whitespace stays proportional to the height of it. Are there any settings that control this whitespace? I've ruled out padding and do not see any settings for margins.
Thanks!
Here is the JavaScript that renders the chart:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
options: {
legend: {
display: false
},
elements: {
point: {
radius: 0
}
},
scales: {
xAxes: [{
gridLines: {
display: false,
drawBorder: true
},
ticks: {
autoSkip: true,
maxTicksLimit: 1
}
}],
yAxes: [{
gridLines: {
display: true,
drawBorder: false
},
ticks: {
callback: function(value, index, values) {
return '$' + addCommas(value);
}
}
}]
},
layout: {
padding: 5
}
},
type: 'line',
data: {
labels: labels,
datasets: [
{
data: values,
fill: false,
borderColor: "blue"
}
]
}
});
And the complete jsfiddle: https://jsfiddle.net/rsn288fh/2/
I know you said you ruled out padding, but this is the only option I can see working:
options: {
layout: {
padding: {
bottom: -20
}
}
}
Obviously you can play with the -20 to what works for you.
Here is the reference for padding for chartjs, if you wanted to see more
EDIT:
I've updated your jsfiddle, with a colored div below the chart. As you resize it seems to stay at the same spot below the chart.
Changing the tickMarkLength to 0 results in no padding on the left or bottom of the chart (or wherever your axis happens to be).
https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration
tickMarkLength
Length in pixels that the grid lines will draw into the axis area.
const options = {
scales: {
xAxes: [
{
ticks: {
display: false,
},
gridLines: {
display: false,
tickMarkLength: 0,
},
},
],
yAxes: [
{
ticks: {
display: false,
},
gridLines: {
display: false,
tickMarkLength: 0,
},
},
],
},
};
I have a bar chart which use ChartJS that shows data. Based on the bar chart, I have the data: 15, 2, 0, 11.
I can see all of these data in the bar, except 0. Is there a possibility to start the bar chart on 0, so I can also see the data for the fourth column in the bar chart?
options: {
legend: { display: false },
scales: {
yAxes: [{
display: false,
}],
xAxes: [{
display: true,
}],
},
title: {
display: false,
}
}
After hours of working, finally i found a soulution. There is no chartjs configuration to do it and you have to draw it your self. Let do it in onComplete function
var ctx = document.getElementById("myChart").getContext('2d');
var datasets = [15, 2, 0, 11];
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["1", "2", "3", "4"],
datasets: [{
label: 'value',
backgroundColor: '#F00',
data: datasets
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
animation: {
onComplete: function() {
var dataSet = myChart.getDatasetMeta(0);
dataSet.data.forEach(elm => {
if (datasets[elm._index] == 0) {
ctx.fillStyle = '#F00';
ctx.fillRect(elm._model.x - elm._view.width / 2, elm._model.y - 1, elm._view.width, 2);
}
})
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas class="canvasChart" id="myChart"></canvas>
You can try beginAtZero:true config option.
options: {
legend: { display: false },
scales: {
yAxes: [{
display: false,
ticks: {
beginAtZero:true
}
}],
xAxes: [{
display: true,
}],
},
title: {
display: false,
}
}
Because your Y-axis values starts from 0 to something. So, if your value is 0 in X-Axis than it would be null and won't show you bar of 0. So, if you want 0 to appear in chart your starting point should be less than the 0.
I believe you said you were using chartsjs. This question already has an answer here.
Try this, chart will start with zero.
options: {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
I'm using v2.*. However, I can't seem to set the default color for a line chart. I'm mainly looking to set the color of the x/y chart values. I figured the below might do it - but it does nothing to the chart at all.
Chart.defaults.global.defaultColor = 'orange',
Update
Here's a jsfiddle with live chart. In short, I'm looking to change the color of the labels i.e. Feb 7, 2016, etc etc.
https://jsfiddle.net/o534w6jj/
Okay, so I figured it out. It's the ticks property I'm looking for...see code below.
See updated jsfiddle: https://jsfiddle.net/o534w6jj/1/
var ctx = $("#weekly-clicks-chart");
var weeklyClicksChart = new Chart(ctx, {
type: 'line',
data: data,
scaleFontColor: 'red',
options: {
scaleFontColor: 'red',
responsive: true,
tooltips: {
mode: 'single',
},
scales: {
xAxes: [{
gridLines: {
display: false,
},
ticks: {
fontColor: "#CCC", // this here
},
}],
yAxes: [{
display: false,
gridLines: {
display: false,
},
}],
}
}
});
for anyone using Chartjs v3+ you can try this.
options: {
...
scales: {
y: {
ticks: {
color: 'red'
}
}
,
}
}