scaleBreaks : Object

ScaleBreaks are ranges in axis scale which are shrank in size in order to remove unnecessary regions. Whenever you have a few dataPoints which are exceptionally large, it reduces readability of other data points as the differences between them is not apparent. In such cases you can use scale breaks to remove unwanted regions and make the small variations become more apparent.

Here is an example:

var  chart =  new  CanvasJS.Chart("chartContainer",
{
 .
 .
 axisX: {
     scaleBreaks: {
	 customBreaks: [{
	     startValue: 100,
	     endValue: 400,
	     color: "orange"
	 }]
     }
 }, 
 .
 .
});
chart.render();

Simple customBreaks Attributes

Applies To Attribute Type Default Options/Examples
scaleBreaks autoCalculate Boolean false true, false
scaleBreaks collapsibleThreshold String “25%” “40%”…
–
scaleBreaks maxNumberOfAutoBreaks Number 2 0,1,2,3,4
scaleBreaks spacing String/Number Automatically Calculated “2%”, 10
scaleBreaks type String “zigzag” “straight”, “wavy”, “zigzag”
scaleBreaks color String “#FFFFFF” “green”,”#23EA23″…
scaleBreaks fillOpacity Number .9 .2, .5
scaleBreaks lineThickness Number 1 0,1,2..
scaleBreaks lineColor String “#E16E6E” “red”, “#A45A23”
scaleBreaks lineDashType String “solid” “dot”,”dash” etc.

Composite Attribute

Object Attributes Type Default Options
scaleBreaks customBreaks Object
–
–
Try Editing The Code

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question