score:5
Accepted answer
here is a fully working example of you what you want :
you misunderstood how chart.js is working (which i can understand since it is a real mess to edit it).
what you want to edit is the tick labels of your axes, and not their title.
then, you must know that the fontsize
and fontcolor
attributes you are looking for are stored in scales.xaxes.ticks
.
so you just have to edit them like this :
var options = {
// ...
scales: {
xaxes: [{
ticks: {
fontsize: 30,
fontcolor: "red"
}
}]
}
// ...
}
and then add this var
to your chart options.
here is a fully working example of you what you want :
var ctx = document.getelementbyid("mychart");
var mychart = new chart(ctx, {
type: 'bar',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
backgroundcolor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
bordercolor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderwidth: 1
}]
},
options: {
scales: {
yaxes: [{
ticks: {
// edit here for the yaxe
beginatzero:true,
fontcolor: "red",
fontsize: 30
}
}],
xaxes: [{
ticks: {
// edit here for the xaxe
fontcolor: "#456ef4",
fontsize: 20
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.1.6/chart.min.js"></script>
<canvas id="mychart" width="400" height="400"></canvas>
score:1
you should have a look at the latest doc: http://www.chartjs.org/docs/.
the font size can be set by changing scalelabel
object
scales: {
xaxes: [{
type: "time",
gridlines : {
display : false
},
scalelabel : { fontcolor: '#6e6e6e', fontsize:16 }
}],
},
Source: stackoverflow.com
Related Query
- Chart.js: Chaing Font Color and Size not working
- in chart js tooltip font size is not working
- chartjs datalabels change font and color of text displaying inside pie chart
- Is there any way to change the font color and size of labels in Chartjs 3.0.0
- Change font size and font color in Chartjs Angular 5
- Background color of the chart area in chartjs not working
- Legend color not working with randomly generated background colors in chartjs pie chart
- chart js download to png with canvas.toDataURL() not working in IE and firefox
- vue-chartjs not working properly in flexbox and when resize chart goes blank
- The colors of the bar chart in chart.js is not showing. I tried background color and fill color but none of it worked
- Can't change the default color and font size of labels in react-chartjs-2
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Cannot change font color and box width in chart
- Pie chart not working using angular and ng2-charts
- angular-chart.js - chart height not working on iOS but works fine on Android and Web
- Change X and Y axis font color
- Chart.js: bar chart first bar and last bar not displaying in full
- Change point size and color on hover in chartjs
- Chart.js bar chart : Grid color and hide label
- Chart looks only grey, does not show the color - Chartjs,discordjs
- Can I specify a different font size for each row of text in Chart Title?
- Chart.js: width and height of a pie chart not respected
- Chartjs not rendering chart and no error thrown
- Chart.js Radar chart legend label font size doesn't work
- ChartJS V3 Radar chart Label Font Size
- Time Series Line chart js in react not working
- How to Increase the label font size and decrease the size of my pie using chart.js?
- Click event of stacked line chart not working
- ChartJS - radar chart options not working
- Bubble Chart in Chartjs not working
More Query from same tag
- Chart.js stacked bar chart in opposite direction
- Vue js component and Chart js
- How to vary the thickness of doughnut chart, using ChartJs.?
- Chart.js line chart is not displaying
- How to chart detected activities on the hour using Chart.js
- How to turn off tooltip for primeng pie chart?
- Passing text to a popup window opened in a JS function
- Charts with previous data appear when hovering the cursor over the chart in Chart.js
- How can i display my data in a chart using chart js
- Horizontal stacked bar chart with chart.js
- Changing color of specific chartjs point
- interactive Button doesn't hide the chart as I intended
- Calling MouseLeave chartJs Angular
- Keep two Pie Charts Side by Side
- Display some chart.js in the popup of chrome's extensions
- Is it possible to get the assigned ref name in a component? Vue.js
- Run the function on load
- Chart JS not rendering on iOS devices
- Count all distinct values from JSON in javascript for ChartJS
- Put sum of values in center of doughnut chart?
- Chart is not populating when getting the data from AJAX call
- ChartJS not displaying time data using Moment.js
- ChartJs Doughnut parsing datasets
- How do I import Chart.js Helper Functions in Django?
- Chart.JS - Tooltips - Issue: 3 data points, all three individual tooltips showing for each data point
- Line chart doesn't work with type time chart.js
- chart.js time scatter with true scale
- How to add background image in bar chart column in Chart.js?
- How to update Chartjs chart (react-chartjs-2) with dynamic data?
- charts.js from session var, flicker effect