score:9
http://www.chartjs.org/docs/#scales-logarithmic-scale
Logarithmic Scale
The logarithmic scale is use to chart numerical data. It can be placed on either the x or y axis. As the name suggests, logarithmic interpolation is used to determine where a value lies on the axis.
score:12
As @user2722127 pointed out, the essence is to put the type on "logarithmic"
.
If you only take care of that, then you will end up with awkward labels in scientific format (e.g. 200000 = "2e5"). I personally prefer them a little more human.
So, the callback method actually converts numeric
data values to string
label values.
Note: the callback will not be called for all values in your dataset. It will just be called for the auto-generated ticks. In my case that was enough. Nevertheless, there may be too much labels. So to limit the number of labels, I simply return null
for all unwanted label values.
yAxes: [{
type: 'logarithmic',
ticks: {
min: 1,
max: 1000000,
callback: function (value, index, values) {
if (value === 1000000) return "1M";
if (value === 100000) return "100K";
if (value === 10000) return "10K";
if (value === 1000) return "1K";
if (value === 100) return "100";
if (value === 10) return "10";
if (value === 1) return "1";
return null;
}
}
}]
Note: the screenshot above shows a chart with a 0-point on its scale. That's actually incorrect. As you can see in the above source code, I later modified the minimum value to be 1. I had to do so, because in later version of chart.js charts actually were seriously messed up and sometimes drawn underneath the chart. And it was all due to a 0-tick. Actually from a mathematical point of view, a logarithmic scale cannot really have a 0-tick. So, it makes more sense to just start at 1 or 0.001 for example. But not 0.
EDIT:
The following is not strictly necessary, but may possibly improve performance.
If you want more control on the created ticks, you can provide an afterBuildTicks
property. ( Which is very similar to what is provided in the answer of @user2722127 .) In this example, it just replaces the content of the ticks array of the chart object with different ticks.
afterBuildTicks = (chartObj) => {
const ticks = [1, 10, 100, 1000, 10000, 100000, 1000000];
chartObj.ticks.splice(0, chartObj.ticks.length);
chartObj.ticks.push(...ticks);
}
You just add this function as a property to the yAxis
element, along with the other properties.
yAxes: [{
type,
ticks,
afterBuildTicks
}]
score:22
You can assign logarithmic scale to y-axis as below:
yAxes: [{
scaleLabel: {
display: true,
labelString: 'LABEL',
},
type: 'logarithmic',
position: 'left',
ticks: {
min: 0.1, //minimum tick
max: 1000, //maximum tick
callback: function (value, index, values) {
return Number(value.toString());//pass tick values as a string into Number function
}
},
afterBuildTicks: function (chartObj) { //Build ticks labelling as per your need
chartObj.ticks = [];
chartObj.ticks.push(0.1);
chartObj.ticks.push(1);
chartObj.ticks.push(10);
chartObj.ticks.push(100);
chartObj.ticks.push(1000);
}
}]
Source: stackoverflow.com
Related Query
- How to assign a logarithmic scale to y axis in chart.js?
- How to prevent first/last bars from being cut off in a chart with time scale
- chartjs : how to set custom scale in bar chart
- chart.js not allowing y axis steps with logarithmic scale
- 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 Create a Custom Logarithmic Axis in Chart.js
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- How to Remove axis Lines from chart in chart js
- how can i modify scale labels in angular chart js?
- How can I style scale numbers in a Polar Area chart (chart.js)
- How to remove x axis scale labels Chart.Js
- how to minimize x axis labels to day hours in chart js
- how to label axis within radar chart with chart.js
- chart.js: How do I make the radar chart axis labels bigger?
- How to stop axis label from being cut off in chart JS?
- How to set custom Y Axis Values (Chart.js v2.8.0) in Chart Bar JS
- How to apply dollar sign in Y- axis in chart js?
- Chart.js - how to make proportional intervals on X axis on line chart
- chart js - bar chart with time scale on Y axis in Hours and Minutes
- How to set a time scale to a ChartJS chart from JSON?
- How to detect click on chart js 3.7.1 axis label?
- How to select context or scale on chart in chartjs quickchart io to run getValueForPixel?
- How to scale label size radar chart chart.js
- How to add new x axis in chart JS?
- How to show tooltip value of all data falling on the same axis in chart js?
- how to disable last/max value shown on x axis in chart js?
- How do you set x and y axis and Title for a line chart using charts.js?
More Query from same tag
- Chart.js - PieChart defined background color for specific dataset element
- Chart.js - Where do I find which components should be registered?
- Chart.js: bad alignment of label during ajax update
- Add line from point to x-axis and bold label of him
- chart.js line for only part of the labels
- Chart js, Canvas is null polymer project
- Can I remove the Y-axis counter on chart.js?
- Can't trigger beforeDraw with Vue-Chartjs (or any other plugins)
- Chartjs treemap example
- Is there a way to have the tooltips always shown on a pie/doughnut in Chart.js v3?
- Chartjs Stacked bar chart not displaying correctly
- Array .map() returning undefined
- Set max value of chart.js bar chart
- Start bar-chart at 0 using ChartJS
- Chart.js: hiding series by clicking on legend
- Django and ChartJS
- Remove Chart.js Gridline Overlap
- Initialize a Chart.js chart with data from an api
- Chartjs 2 scaling lots of data points
- How can I build a double doughnut chart that spins when triggered
- Drawing linear chart without gaps in Chart.js
- How to plot dates in Chart.js
- ChartJS with dates on the X axis not displaying any graph
- How to change the font size of yAxis ticks in chartJs?
- Display values in Pareto chart using Chart.js 2.0.2
- Chart.js data goes backwards when retroactively pushing datapoint from HTTP request using Angular
- Can't render two charts on the same page from chart.js
- Chartjs Legend Styling
- build a javascript callback function from php for chartjs
- Outputting multiple SQL queries in chart.js