React Charts & Graphs with Axis / Scale Breaks

Download React Chart Samples

CanvasJS React chart component supports axis scale breaks that are helpful when some datapoint values are either extremely high or low. Its supported in every chart with axis including line, column, area, bar, etc. Below example shows column chart with scale-breaks along with source code that you can try running locally.

/* App.js */
import React, { Component } from 'react';
import CanvasJSReact from './canvasjs.react';
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;

class App extends Component {	
	render() {
		const options = {
			animationEnabled: true,
			theme: "dark2",
			title: {
				text: "Worpress Featured Plugins"
			},
			axisY: {
			title: "Active Installations",
				scaleBreaks: {
					autoCalculate: true,
					type: "wavy",
					lineColor: "white"
				}
			},
			data: [{
				type: "column",
				indexLabel: "{y}",		
				indexLabelFontColor: "white",
				dataPoints: [
					{"label":"Akismet Anti-Spam","y":5000000},
					{"label":"Jetpack","y":4000000},
					{"label":"WP Super Cache","y":2000000},
					{"label":"bbPress","y":300000},
					{"label":"BuddyPress","y":200000},
					{"label":"Health Check","y":200000}    
				]
			}]
		}
		
		return (
		<div>
			<CanvasJSChart options = {options} 
				/* onRef={ref => this.chart = ref} */
			/>
			{/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
		</div>
		);
	}
}

module.exports = App;

Chart Customizations

Scale breaks can be auto calculated when the difference between the data points reaches to a default threshold value. However, you can customize scale breaks by applying breaks only if the range is more than the set collapsibleThreshold. Other commonly used customization options are maxNumberOfAutoBreaks, customBreaks, etc.

Note   For step by step instructions, follow our React Integration Tutorial