score:3
Accepted answer
You can use logarithmic
type yAxis
Default: linear
https://www.chartjs.org/docs/latest/axes/cartesian/logarithmic.html
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
label: "Series 1",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 43, 81, 56, 950],
}]
},
options: {
scales: {
yAxes: [{
type: 'logarithmic',
ticks: {
callback: function(tick, index, ticks) {
return tick.toLocaleString();
}
}
}]
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart" width="400" height="200"></canvas>
Optimized ticks
50 * (Math.floor(i / 50)), // lower 50
50 * (Math.ceil(i / 50)) // higer 50
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
label: "Series 1",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 43, 81, 56, 950],
}]
},
options: {
scales: {
yAxes: [{
type: 'logarithmic',
ticks: {
callback: function(tick, index, ticks) {
return tick.toLocaleString();
}
},
afterBuildTicks: function(pckBarChart) {
pckBarChart.ticks = pckBarChart.chart.data.datasets[0].data.flatMap(i => [
50 * (Math.floor(i / 50)), // lower 50
50 * (Math.ceil(i / 50)) // higer 50
])
}
}]
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart" width="400" height="200"></canvas>
Source: stackoverflow.com
Related Query
- Chart.js compress vertical axis on barchart
- display vertical axis label in line chart using chart.js
- 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
- In Chart.js set chart title, name of x axis and y axis?
- Remove the vertical line in the chart js line chart
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Moving vertical line when hovering over the chart using chart.js
- Chart Js change text label orientation on Ox axis
- Vertical stacked bar chart with chart.js
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- show label in tooltip but not in x axis for chartjs line chart
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- Chart JS - set start of week for x axis time series
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Chart.js Dynamically Updating Chart with X Axis Time
- How do I change the 'months' language displayed on the date axis in Chart JS?
- Obtain max value of y axis of line chart rendered with Chart.js
- Changing x axis labels in Chart.js line chart
- Draw a horizontal and vertical line on mouse hover in chart js
- Line chart with large number of labels on X axis
- chart.js switch x/y axis on line chart
- ChartJS: Draw vertical line at data point on chart on mouseover
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Chart js different background for y axis
- chartjs - Drawing vertical line on integer x axis value
- Map event position to y axis value in chartjs line chart
- Show all values in Chart js y axis
- Chart js vertical line z-index
- Chart Js, Style some ticks on the axis differently
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
More Query from same tag
- charts labels and data with php arrays
- Chart.js two categorical scales
- Change color of a single point by clicking on it - Chart.JS
- NPM module doesn't work with Webpack 3 but works with vue-cli3 which based on Webpack 4
- Chart.js turn labels into links
- How to display certain part of chart.js as dotted while rest as bold?
- How to set custom Y Axis Values (Chart.js v2.8.0) in Chart Bar JS
- Hide Legend in Chart.js V3.7.1
- Display all tooltips in chartjs
- Chart.js ignoring stepSize in the first and last step
- How to export chart.js graph to svg in vue?
- ChartJS - Show values in the center of each bar
- Charts.js dynamic data call (Angular)
- Stacked line chart not displaying correctly when Xaxis is time
- Chart.js add border around line chart, and yAxis unit title ([s])
- Update of options for PrimeNG Chart needs two calls instead of one
- Struggling with dynamic data
- native element not defined when ngSwitch condition in canvas element
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- Mapping data from JSON not parsing well
- Chart.js . ASP . Legend Template
- Chart.js legend - split into two and display separately?
- chart.js bar chart x-axis label disappeared
- Connecting Chart.js to MySQL database
- How to center radar chart ticks when changing start angle of chart?
- How to update only new data in Chart.JS?
- chartjs doesn't render dates properly
- Chart.js Bar Chart coloring Technique
- ChartJS, Multiple line in bar chart label
- How to use GET method to choose the right table to show ChartJS graph?