Vue Charts - Custom Axis Position

The Chart component initially displays axes along pane borders. Several other predefined axis layout properties are available. In this demo, the customPosition property is used to move each axis, so that it is displayed on the specified value of another axis. When you position the argument axis, use values from the value axis (in the same type and format) and vice versa.

Backend API

<template> <div> <DxChart id="chart" :data-source="dataSource" > <DxCommonSeriesSettings type="scatter"/> <DxSeries argument-field="x1" value-field="y1" /> <DxSeries argument-field="x2" value-field="y2" > <DxPoint symbol="triangleDown"/> </DxSeries> <DxArgumentAxis :visual-range="[-20, 20]" :custom-position="argumentPosition" :offset="argumentOffset" /> <DxValueAxis :visual-range="[-20, 20]" :custom-position="valuePosition" :offset="valueOffset" :end-on-tick="false" /> <DxLegend :visible="false"/> </DxChart> <div class="options"> <div class="caption">Options</div> <div class="common"> <div class="block left"> <span>Argument Axis</span> <div class="option"> <span>Custom position:</span> <DxNumberBox v-model:value="argumentPosition" :show-spin-buttons="true" :input-attr="{ 'aria-label': 'Custom Position' }" /> </div> <div class="option"> <span>Offset:</span> <DxNumberBox v-model:value="argumentOffset" :show-spin-buttons="true" :input-attr="{ 'aria-label': 'Offset' }" /> </div> </div> <div class="block right"> <span>Value Axis</span> <div class="option"> <span>Custom position:</span> <DxNumberBox v-model:value="valuePosition" :show-spin-buttons="true" :input-attr="{ 'aria-label': 'Custom position' }" /> </div> <div class="option"> <span>Offset:</span> <DxNumberBox v-model:value="valueOffset" :show-spin-buttons="true" :input-attr="{ 'aria-label': 'Offset' }" /> </div> </div> </div> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import { DxChart, DxCommonSeriesSettings, DxSeries, DxPoint, DxArgumentAxis, DxValueAxis, DxLegend, } from 'devextreme-vue/chart'; import DxNumberBox from 'devextreme-vue/number-box'; import { generateDataSource } from './data.ts'; const argumentPosition = ref(0); const argumentOffset = ref(0); const valuePosition = ref(0); const valueOffset = ref(0); const dataSource = generateDataSource(); </script> <style> .options { padding: 20px; margin-top: 20px; background-color: rgba(191, 191, 191, 0.15); } .option { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; } .option > span { margin-right: 20px; } .caption { font-size: 18px; font-weight: 700; } .option > .dx-numberbox { width: 90px; margin-left: auto; } .common { width: 488px; } .block { vertical-align: middle; margin-top: 10px; } .left { display: inline-block; } .right { float: right; } .block > span { font-size: 18px; font-weight: 500; } </style>

export function generateDataSource() { let x1 = 0; let x2 = 0; let y1 = 0; let y2 = 0; let i: number; const ds: Array<{ x1: number; y1: number; x2: number; y2: number }> = []; for (i = 0; i < 20; i += 1) { x1 = random(5, 15); y1 = random(5, 15); ds.push({ x1, y1, x2, y2, }); } for (i = 0; i < 20; i += 1) { x2 = random(5, 15); y2 = random(-15, -5); ds.push({ x1, y1, x2, y2, }); } for (i = 0; i < 20; i += 1) { x2 = random(-15, -5); y2 = random(5, 15); ds.push({ x1, y1, x2, y2, }); } for (i = 0; i < 20; i += 1) { x1 = random(-15, -5); y1 = random(-15, -5); ds.push({ x1, y1, x2, y2, }); } return ds; } function random(min: number, max: number): number { return Math.floor(Math.random() * (max - min + 1)) + min; }

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.7/css/dx.light.css" /> <script src="https://cdn.jsdelivr.net/npm/typescript@5.4.5/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>

Regardless of which automatic axis layout type you use, the Chart Control allows you to apply manual offsets. Specify the offset property in pixels to keep the axis position unchanged when users scroll or zoom the Chart data. The offset property shifts the axis from the specified position as follows:

If the axis is horizontal, a negative offset shifts the axis to the top, a positive offset shifts it to the bottom.
If the axis is vertical, a negative offset shifts the axis to the left, a positive offset shifts it to the right.

In this demo, you can use controls under the Chart to change the customPosition and offset properties for both axes.