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

Normally, you use the ‘position’ property to specify the edge against which an axis must be rendered (left and bottom edges by default). In this instance, axes intersect in visible range corners. The visible range depends on data points and scroll/zoom coordinates.
In certain instances, you may want to stick an axis to a specific value at its orthogonal axis. To implement this requirement, you can use the new customPosition property of the ‘argumentAxis’ and ‘valueAxis’ configuration objects. In the example below, axes are fixed at the 0 point of one another.
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.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
No Comments

Please login or register to post comments.