score:1
Accepted answer
yes, you can specify the ticks you want with the afterbuildticks
hook. you can also specify the count
property in the ticks this will make it so chart.js generates that many ticks but you dont have control over the values of those ticks:
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
x: i,
y: i
})
}
const options = {
type: 'scatter',
data: {
datasets: [{
label: '# of votes',
data: data,
bordercolor: 'orange',
backgroundcolor: 'orange'
}]
},
options: {
scales: {
x: {
afterbuildticks: (a) => (a.ticks = [{
value: 0
}, {
value: 25
}, {
value: 50
}, {
value: 75
}, {
value: 100
}]),
ticks: {
count: 5, // limit to 4 ticks but let chart.js decide what tose ticks are
}
}
}
}
}
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.7.1/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- How to add labels for only some of the data point?
- Chart.JS: How can I only display data labels when the bar width is big enough for the text?
- Chart.JS: How can I only display data labels when the doughnut size is big enough for the text?
- In Chart.js >3.0, on axis of type time, how to show labels and ticks only for existing data points (make labels reflect data)?
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- How to add several labels to the same set of data in chartjs?
- Render labels only when the data is available for a particular label
- Chart.js: only show labels on x-axis for data points
- How to show Y axis ticks for every point in the graph
- How to add an empty data point to a linechart on Chart.js?
- How to hide Chart.js data labels for small screens
- How to show only the data points that have a change in Chartjs?
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- Charts.js - Display data label only for the last value
- How can I create custom tooltips for each data point in a graph?
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- Chart.js - how to add a second data line to the line graph
- How to clear the data for a angular-chart
- How to add new data point and remove leftmost data point dynamically in Chartjs
- How to show the chartjs bar chart data values labels as text?
- How I can increase the number of colors for bar labels in ChartJS?
- ChartJs(Java) Can I remove only specific gridLines for a Linear Chart withouth removing the labels on xAxis?
- How to add labels on top of the chart bar with Chart.js 2
- How to add left padding for my charts done in ChartJs and my Google Map so it is not glued to the limit of the page on the left
- How to add data to chart.js with a for loop
- Is it possible for chat.js "Stepped Line Chart" to render the stepped line without the next data point
- How to add the value for each label to pie legend
- How write the labels of the data inside a Doughnut Chart made with Chart.js?
- How to show tick marks and labels with grid line for the specific one on the X axis with Chart.js?
- How I can add the predict data and the actual data in the same graph with ChartJS?
More Query from same tag
- Remove Decimal values in Yaxis Linechart -Primefaces
- How to make rectangle in chart.js
- Chart.js - Black bar colors in mobile devices
- Why scatter chart does not show axes?
- Having trouble fetching data from database for chart in ASP .NET Core
- Hide or show two datasets with one click event of legend in chart.js
- using react-chartjs-2 , How can I save my chart as png using a download button
- How to position yAxes labels in chartJS
- Stacked horizontal chart. How to trigger individual hover in the stacked element?
- How to add additional label in the middle of each bar using ChartJS
- Uncaught ReferenceError: Chart is not defined at test.html:11
- Update Chart JS with date range selector
- ChartJS, nested flexbox, not shrinking
- How to use HTML in custom tooltip in angular charts?
- onZoom not triggered when zooming
- Chart.js - get base 64 encoded string as variable
- Why does the horizontal bar size jump when resizing the chart?
- hover/mouseover not activated on every move inside element
- chartjs with local dates
- Extend chart.js in PHP heredoc causes parse error
- PrimeNG chart js is not rendering
- Angular 2 ng2-charts donut change segment color
- ChartJS display tooltip at maximum/minimum value
- how to modify horizontal bar chart using chart js
- The dataset in ng2 charts for bar graph is not setting properly
- Data not displaying in Chart JS from PHP JSON
- Why the bar are not aligned the y axis
- Using sticky figures above bars in chart.js
- react-chartjs-2 TypeError: undefined is not an object (evaluating 'nextDatasets.map')
- how to combine to array for chartjs width php