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", { . . axisY: { scaleBreaks: { customBreaks: [{ startValue: 100, endValue: 400, color: "orange" }] } }, . . }); chart.render();
Applies To | Attribute | Type | Default | Options/Examples | Remarks |
---|---|---|---|---|---|
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.. |
Object | Attributes | Type | Default | Options |
---|---|---|---|---|
scaleBreaks | customBreaks | Object |
Also See: