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("container",
{
 .
 .
 axisX: {
     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