Chart.js/docs/01-Scales.md

title	anchor
Getting started	getting-started

###Scales

Scales in v2.0 of Chart.js are significantly more powerful, but also different than those of v1.0.

• Multiple x & y axes are now supported.
• A built-in label auto-skip feature now detects would-be overlapping ticks and labels and removes every nth label to keep things displaying normally.
• Scale labels

Every scale extends a core scale class with the following options:

Chart.defaults.scale = {
	display: true,

	// grid line settings
	gridLines: {
		show: true,
		color: "rgba(0, 0, 0, 0.1)",
		lineWidth: 1,
		drawOnChartArea: true,
		drawTicks: true,
		zeroLineWidth: 1,
		zeroLineColor: "rgba(0,0,0,0.25)",
		offsetGridLines: false,
	},

	// scale label
	scaleLabel: {
		fontColor: '#666',
		fontFamily: 'Helvetica Neue',
		fontSize: 12,
		fontStyle: 'normal',

		// actual label
		labelString: '',

		// display property
		show: false,
	},

	// label settings
	ticks: {
		beginAtZero: false,
		fontSize: 12,
		fontStyle: "normal",
		fontColor: "#666",
		fontFamily: "Helvetica Neue",
		maxRotation: 90,
		minRotation: 20,
		mirror: false,
		padding: 10,
		reverse: false,
		show: true,
		template: "<%=value%>",
		userCallback: false,
	},
};

The userCallback method may be used for advanced tick customization. The following callback would display every label in scientific notation

{
    scales: {
        xAxes: [{
            ticks: {
                // Return an empty string to draw the tick line but hide the tick label
                // Return `null` or `undefined` to hide the tick line entirely
               	userCallback: function(value, index, values) {
    				return value.toExponential();
    			}
            }
        }]
    }
}

Category Scale

The category scale will be familiar to those who have used v1.0. Labels are drawn in from the labels array included in the chart data.

The category scale extends the core scale class with the following tick template:

{
	position: "bottom",
}

Linear Scale

The linear scale can be used to display numerical data. It can be placed on either the x or y axis. The scatter chart type automatically configures a line chart to use one of these scales for the x axis.

The linear scale extends the core scale class with the following tick template:

{
	position: "left",
}

Logarithmic Scale

The logarithmic scale is used to display logarithmic data of course. It can be placed on either the x or y axis.

The log scale extends the core scale class with the following tick template:

{
	position: "left",
	ticks: {
		template: "<%var remain = value / (Math.pow(10, Math.floor(Chart.helpers.log10(value))));if (remain === 1 || remain === 2 || remain === 5) {%><%=value.toExponential()%><%} else {%><%= null %><%}%>",
	}
}

Time Scale

The time scale is used to display times and dates. It can be placed on the x axis. When building its ticks, it will automatically calculate the most comfortable unit base on the size of the scale.

The time scale extends the core scale class with the following tick template:

{
	position: "bottom",
	time: {
		// string/callback - By default, date objects are expected. You may use a pattern string from http://momentjs.com/docs/#/parsing/string-format/ to parse a time string format, or use a callback function that is passed the label, and must return a moment() instance.
		format: false,
		// string - By default, unit will automatically be detected.  Override with 'week', 'month', 'year', etc. (see supported time measurements)
		unit: false, 
		// string - By default, no rounding is applied.  To round, set to a supported time unit eg. 'week', 'month', 'year', etc.
		round: false, 
		// string - By default, is set to the detected (or manually overridden) time unit's `display` property (see supported time measurements).  To override, use a pattern string from http://momentjs.com/docs/#/displaying/format/
		displayFormat: false
	},
}

The following time measurements are supported:

{
	'millisecond': {
		display: 'SSS [ms]', // 002 ms
		maxStep: 1000,
	},
	'second': {
		display: 'h:mm:ss a', // 11:20:01 AM
		maxStep: 60,
	},
	'minute': {
		display: 'h:mm:ss a', // 11:20:01 AM
		maxStep: 60,
	},
	'hour': {
		display: 'MMM D, hA', // Sept 4, 5PM
		maxStep: 24,
	},
	'day': {
		display: 'll', // Sep 4 2015
		maxStep: 7,
	},
	'week': {
		display: 'll', // Week 46, or maybe "[W]WW - YYYY" ?
		maxStep: 4.3333,
	},
	'month': {
		display: 'MMM YYYY', // Sept 2015
		maxStep: 12,
	},
	'quarter': {
		display: '[Q]Q - YYYY', // Q3
		maxStep: 4,
	},
	'year': {
		display: 'YYYY', // 2015
		maxStep: false,
	},
}

Radial Linear Scale

The radial linear scale is used specifically for the radar chart type.

The radial linear scale extends the core scale class with the following tick template:

{
	animate: true,
	lineArc: false,
	position: "chartArea",

	angleLines: {
		show: true,
		color: "rgba(0, 0, 0, 0.1)",
		lineWidth: 1
	},

	// label settings
	ticks: {
		//Boolean - Show a backdrop to the scale label
		showLabelBackdrop: true,

		//String - The colour of the label backdrop
		backdropColor: "rgba(255,255,255,0.75)",

		//Number - The backdrop padding above & below the label in pixels
		backdropPaddingY: 2,

		//Number - The backdrop padding to the side of the label in pixels
		backdropPaddingX: 2,
	},

	pointLabels: {
		//String - Point label font declaration
		fontFamily: "'Arial'",

		//String - Point label font weight
		fontStyle: "normal",

		//Number - Point label font size in pixels
		fontSize: 10,

		//String - Point label font colour
		fontColor: "#666",
	},
}