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.


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.
No Comments

Please login or register to post comments.