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.
Free DevExpress Products - Get Your Copy Today
The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the
DevExpress Support Center at your convenience. We'll be happy to follow-up.