score:5
Accepted answer
I manage to solve this by creating callback functions on xAxis : ticks
and tooltips : title
when creating the chart.
Here is my code that sets up the chart.js:
<script>
var data = JSON.parse('<?php echo $data?>');
var ctx = document.getElementById("points-given-chart").getContext('2d');
var chartPoints = new Chart( ctx, {
type: 'line',
data: {
datasets: [
{
data: data,
borderWidth: 3,
label: 'Pontos',
borderColor: 'rgba(246, 185, 59,1.0)',
backgroundColor: 'rgba(250, 211, 144,1.0)',
}
]
},
options: {
responsive: true,
title: {
display: false,
text: "Pontos"
},
scales: {
xAxes: [{
type: "time",
time: {
unit: 'day',
tooltipFormat: 'D MMM, YYYY',
displayFormats: {
day: 'D MMM'
},
distribution: 'series'
},
scaleLabel: {
display: true,
},
ticks : {
// Here's where the magic happens:
callback: function( label, index, labels ) {
return translate_this_label( label );
}
}
}],
yAxes: [{
scaleLabel: {
display: false,
labelString: 'Pontos'
},
ticks : {
beginAtZero : true,
callback: function( label, index, labels ) {
if ( label > 1 )
return formatNumber( label, 0, ',', '.');
else
return label;
}
}
}]
},
elements: {
line: {
tension: 0.2, // disables bezier curves
}
},
legend: {
display: false
},
tooltips: {
callbacks: {
// Here's where the magic happens:
title: function( data ) {
return translate_this_label( data[0].xLabel );
},
label: function ( item, data ) {
return 'Pontos: ' + formatNumber( item.yLabel, 0, ',', '.');
}
}
}
}
});
</script>
And here are the helper functions to perform the translations:
function translate_month( month ) {
var result = month;
switch(month) {
case 'Feb':
result = 'Fev' ;
break;
case 'Apr':
result = 'Abr' ;
break;
case 'May':
result = 'Mai' ;
break;
case 'Aug':
result = 'Ago' ;
break;
case 'Sep':
result = 'Set' ;
break;
case 'Dec':
result = 'Dez' ;
break;
}
return result;
}
function translate_this_label( label ) {
month = label.match(/Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Nov|Dec/g);
if ( ! month )
return label;
translation = translate_month( month[0] );
return label.replace( month, translation, 'g' );
}
score:2
When using Chart.js v2.8+ and moment v2+ you can use chartjs-adapter-moment
to automatically translate the axis labels:
import moment from "moment";
import "moment/locale/nl";
import Chart from "chart.js";
import "chartjs-adapter-moment";
moment.locale("nl");
new Chart(...);
score:5
Source: stackoverflow.com
Related Query
- How do I change the 'months' language displayed on the date axis in Chart JS?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- angular-chart.js doughnut chart : How do I change width of the arc of a doughnut?
- chart.js: How do I make the radar chart axis labels bigger?
- How to change the chart line or area colors according to the user need?
- How to style a pie chart in chart js? I want to change the border color, border width and give them shadow
- How to change color by clicking on the chart bar?
- Chartjs - how to change the notation of doughnut chart
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- How to show tooltip value of all data falling on the same axis in chart js?
- How to change the time format displayed in the chart?
- How to change the color of y axis labels in different color in Chart.js
- How to change text colour of specific labels of axis in Chart JS?
- How do I change the grid line style on the Y axis in Chart.js?
- How to remove the extra Y axis from a bar chart in chart.js
- How to change the position of the tooltip for the Bar type chart in Chart.Js
- How to add custom text inside the bar and how to reduce the step size in y axis in chart js( Bar chart )
- How to Change the Y axis of an Primefaces 7.0 ChartJS Linechart with Java?
- How can I change the background colors of a bar chart after it has been created?
- 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
- How to change the angle of x axis ticks dynamically based on size of name?
- ChartJS fails to render one of the lines in cartesian chart following update after change to max Y axis label value
- How do I stop chart js from auto rescaling the y axis upon calling chart.update()?
- How to change the display of an axis Chart.js
- How can I automatically rescale the y axis of my log chart using ChartJS?
- How to change width of the chart using Chart.js
- In chart.js how can I change the x axis on my line \chart from January-December to October-September? Basically, fiscal year instead of calendar year
- How to change the z order of a chartjs polar chart
More Query from same tag
- Hide/disable tootlip on specific graph values
- plugins.legend.align are incompatible types typescript chartjs
- Can't change the time of the xAxes in the Chart.js
- how to add a title to my ng2-charts bar chart
- How to fix size of mixed chart with bubble chart in Chart.js?
- Change mouse cursor to pointer in charts js
- JavaScript - Chart.js tooltip shows wrong x-axis value
- Overlay text message on top of a chart
- Get bar value when onClick Reactjs
- Angular ChartJs does not show Data for multiple Charts
- Trying to have Doughnut chart with dql result chartjs
- How do you insert a linear horizontal line in chart.js
- Chart.js -> line chart -> multiple points with the same X
- how to only show zero grid axes at center and hide all other gridlines in chart js
- Chart.js: Dynamic Changing of Chart Type (Line to Bar as Example)
- convert csv to json for javascript plotting library chartjs in Python or PHP
- Chart.js returns a console error and does not display the chart when using variables as data input
- Is there a way to represent date hole in chartjs time series?
- how to not repeat code while creating multiple charts in chart js
- Chart.js pie chart in table shows weird behavior on page resize
- ChartJs title not showing
- How to get any y value for specified x in chart.js?
- Hide x-Axis from angularjs-chartjs
- Chart.js is not rendered until zoom in in angular 8
- Trying to load a chart with chart.js, through ajax and php
- Horizontal line syncing across multiple charts when hovering with Chart.js in Typescript-react
- Chart.JS - Wrong Y axis
- Filter dates from the first day of the month to the current date
- Chartjs: make square legends
- vertical grid line not taking full hight of the canvas in chart js 3.3.2