How to use the chart control of the b/s development tool devextreme - customize the axis position?

DevExtreme Charts Control comes with an enhancement to the axis positioning logic , Developers can be anywhere on the diagram （ Not just its edges ） Locate the axis and specify the intersection coordinates . for example , This feature allows developers to create quadrants or display axes in fixed positions during scrolling and zooming operations .

DevExtreme v22.1 Official download

Custom intersections

Usually , Use ‘position’ Property to specify that the edges of the axis must be rendered （ By default, the left and bottom edges ）. under these circumstances , The axes intersect at the angle of the visible range , The visible range depends on the data points and scrolling / Scale coordinates .

In some cases , You may want to fix the axis to a specific value on its orthogonal axis . To achieve this , You can use “argumentAxis” and “valueAxis” Configure the new... Of the object customPosition attribute . In the following example , The shafts are fixed to each other 0 spot .

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

Axis offset

For some usage scenarios , You may want to display the axis in a fixed position independent of the current zoom level and scrolling position , You can use the new offset  Option to specify the axis coordinates relative to its original intersection （ In pixels ）. In the following example , 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
}

Multi axis support

If your chart contains multiple value axes , have access to customPositionAxis Option to set the name of the relevant numerical axis , You can use it as follows ：

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

DevExtreme | Download trial

DevExtreme With high performance HTML5 / JavaScript A collection of widgets , So you can take advantage of modern Web Development stack （ Include React,Angular,ASP.NET Core,jQuery,Knockout etc. ） Build interactive Web Applications . from Angular and Reac, To ASP.NET Core or Vue,DevExtreme Includes comprehensive high performance and responsive UI A collection of widgets , But in the tradition Web And the next generation of mobile applications . The suite comes with a fully functional data grid 、 Interactive chart widget 、 Data editor, etc .

---

DevExpress Technology exchange group 6：600715373       Welcome to group discussion

more DevExpress Online open class 、 For Chinese tutorial information, please go to the Chinese website