score:1
Accepted answer
you can use the tickcallback to transform the value to whatever you like, easyest thing to do is make an array with all the weekdays and then use the value as an index like so:
const weekdays = ["sun", "mon", "thu", "wen", "tru", "fri", "sat"];
const options = {
type: 'bubble',
data: {
datasets: [{
label: '# of votes',
data: [{
x: 0,
y: 1,
r: 4
}, {
x: 1,
y: 1,
r: 4
}, {
x: 2,
y: 1,
r: 4
}, {
x: 3,
y: 1,
r: 4
}, {
x: 4,
y: 1,
r: 4
}, {
x: 5,
y: 1,
r: 4
}, {
x: 6,
y: 1,
r: 4
}],
backgroundcolor: 'pink'
}]
},
options: {
scales: {
x: {
ticks: {
callback: (val) => (weekdays[val])
}
}
}
}
};
const ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.5.0/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- ChartJs days of the week from numbers
- how can i send a list of numbers from views.py to a chartjs file im using for the front?
- ChartJs 2 How to remove numbers from the doughnut chart on loading
- how do i use the numbers i key in from a form as the input data for chartjs
- Change the Y-axis values from real numbers to integers in Chart.js
- How to change the Y-axis values from numbers to strings in Chart.js?
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Chartjs not working with d3 from csv source
- Passing an Array from a Flask view to the javascript code of another view
- ChartJS - Scale x axis labels from single days to multiple months
- Why is my data on chartjs not starting from the data that it should
- chartjs how to update dynamically data from database(Chartjs cant get the data)
- Using number/text input field to set the data values in ChartJs stops the chart from being displayed
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- ChartJS - would like to create a mixed chart with horizontal Bar and a dot to represent the answer from the current user
- Calling data from outside of Chartjs code
- how can I show only 2 numbers on the xAxe in Chartjs having more than two numbers on the chart? (line chart)
- ChartJS - Injecting data from the server-side
- How do you get the width of a datalabel from the Chartjs plugin after the chart animates?
- How to get the image from graph created using chartjs
- Chartjs force horizontal bar to start from the lowest value
- Chartjs - How to update the data from values in my database?
- chart.js Failed to create chart: can't acquire context from the given item
- Chartjs random colors for each part of pie chart with data dynamically from database
- How do I prevent the scale labels from being cut off in chartjs?
- Truncating canvas labels in ChartJS while keeping the full label value in the tooltips
- Dynamically update the options of a chart in chartjs using Javascript
- Chartjs displays numbers not time
- ChartJS and jsPDF - why the background is black?
- how to change the Y-axis values from float number to integer in chartjs?
More Query from same tag
- Loading and updating dynamic charts with dynamic data (chart.js)
- Loop through array for chart.js input
- Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale
- chart.js control space between/size of gridlines
- How to distribute the y-ticks proportionally in Chart.js in Flask app?
- attempting to change height and width of canvas for chart
- How can I add dataset toggle to Chart.js?
- Extending Existing Chart Types angular chart js using chart js 2.0
- ChartJs does not render chart when binding canvas id in Angular
- how to put a y-axis and x-axis label while using html and chartjs
- Draw chart.js as svg
- Chart.Js vers2 multiline to version 3
- React-chartjs-2 - Each dataset needs a unique key
- How to get canvas/ctx object in Chart.js for an Angular project
- Passing data from .csv (d3.js) to Chart.js, am I doing something wrong?
- Cant change labels in Chart.js 2.0 Beta
- Where are the default colors for charts in Chart.js defined?
- Chart.js bar chart: show tooltip on label hover
- How could I put a string for the points on the x-axis?
- Chart.js How to change y axis title position
- Have all label in Chartjs be at fixed positions
- Is it possible to shorten outer labels on Radar graph using Chart.js, without affecting the other labels?
- Stacked Floating Horizontal Bar using ChartJS
- Values on Y-axis disappear (hide under labels)
- How can i do this chart in react?
- Overlap chart datasets with different view types in Chart.js
- Make x label horizontal in ChartJS
- Chart.js turn off all y axis and toggle them on / off
- Problem creating scatter graph using chart.js
- Remove all borders from my chart in angular-chart-js