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();
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 | lineColor | String | “red” | “green”,”#23EA23″ |
customBreaks | lineThickness | Number | 2 | 4 |
Also See: