DevExtreme Charts – Custom Axes Position (v20.1)

DevExtreme Charts (v20.1) ships with enhancements to axes positioning logic. You can now locate axes at any position on a chart (not just its edge) and specify intersection point coordinates. For instance, this new feature allows you to create quadrant charts or display axes at a fixed position during scroll and zoom operations.

Custom Intersection Point

argumentAxis: {
    customPosition: 0 // value at valueAxis 
},
valueAxis: {
    customPosition: 0 // value at argumentAxis 
}

Axes Offset

For certain usage scenarios, you may need to display axes at a fixed position independent of current zoom level and scroll position. You can use the new offset option to specify axes coordinates in pixels relative to their original intersection point. In the example below, the axes always intersect at the center of the chart’s visible range:

argumentAxis: {
    offset: -200 // a half of visible range height 
},
valueAxis: { 
    offset: 390 // a half of visible range width 
}

Multiple Axes Support

If your chart includes multiple value axes, you can use the customPositionAxis option to set the name of related value axis. You can use it as follows:

argumentAxis: {
    customPosition: -10,
    customPositionAxis: "leftAxis"
},
valueAxis: [{
    position: "right"
},{
    position: "left",
    name: "leftAxis"
}]

Please refer to our new Custom Axis Position demo to explore these new options in greater detail.

Feedback

Please share your thoughts on this new feature in the comments below. We’ll be happy to follow-up.