customBreaks: Object

Using customBreaks you can specify the ranges on axis to shrink/remove. You can add any number of custom scale breaks.

If you want to shrink a certain section on the axis, you can specify the range with startValue and endValue attributes. This range will be represented with a Scale Break.

Here is an example:

var  chart =  new  CanvasJS.Chart("chartContainer",
{
 .
 .
 axisY: {
      scaleBreaks: {
	      customBreaks: [{
	             startValue: 100,
	             endValue: 500,
	             color: "orange",
	             type: "zigzag"
             },
             {
	             startValue: 700,
	             endValue: 1000,
	             color: "green",
	             type: "wavy"
             }]

      },
 .
 .
 },
 .
 .
});
chart.render();

Simple customBreaks Attributes

Applies To Attribute Type Default Options/Examples
customBreaks startValue Number null 20
customBreaks endValue Number null 30
customBreaks type String “straight” “straight”, “waved”, “zigzag”
customBreaks spacing Number/String Automatically Calculated 5,10,20
customBreaks color String “white” “green”,”#23EA23″
customBreaks fillOpacity Number .9 .2, .5
customBreaks lineColor String “red” “green”,”#23EA23″
customBreaks lineThickness Number 2 4
customBreaks lineDashType String “solid” “dot”,”dash” etc.
Try Editing The Code

  Also See:    

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