Vue Chart - Overview

The Chart UI component visualizes data on the rectangular coordinate system. In this system, each point is determined on a plane by two components: the argument and the value, each indicated on a devoted axis.

DevExtreme HTML5 JavaScript Charts Axis Axes

To configure the argument or value axis individually, use the argumentAxis or valueAxis object respectively. If the axes share certain settings between each other, specify them in the commonAxisSettings object, but note that axis-specific settings override common settings.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        argumentAxis: {
            // high priority
        },
        valueAxis: {
            // high priority
        },
        commonAxisSettings: {
            // low priority
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxo-argument-axis>
        <!-- high priority -->
    </dxo-argument-axis>
    <dxi-value-axis>
        <!-- high priority -->
    </dxi-value-axis>
    <dxo-common-axis-settings>
        <!-- low priority -->
    </dxo-common-axis-settings>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxArgumentAxis>
            <!-- high priority -->
        </DxArgumentAxis>

        <DxValueAxis>
            <!-- high priority -->
        </DxValueAxis>

        <DxCommonAxisSettings>
            <!-- low priority -->
        </DxCommonAxisSettings>
    </DxChart>
</template>

<script>
import DxChart, {
    DxArgumentAxis,
    DxValueAxis,
    DxCommonAxisSettings
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxArgumentAxis,
        DxValueAxis,
        DxCommonAxisSettings
    }
}
</script>
React
App.js
import React from 'react';
import Chart, {
    ArgumentAxis,
    ValueAxis,
    CommonAxisSettings
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <ArgumentAxis>
                    {/* high priority */}
                </ArgumentAxis>

                <ValueAxis>
                    {/* high priority */}
                </ValueAxis>

                <CommonAxisSettings>
                    {/* low priority */}
                </CommonAxisSettings>
            </Chart>
        );
    }
}

export default App;

Axes can be of one of the following types.

  • Continuous
    Displays numeric and date-time arguments/values.

  • Discrete
    Displays string arguments/values called "categories".

  • Logarithmic
    Displays numeric arguments/values, each being the logarithmBase value raised to some power. For example, logarithmBase equaling to 10 produces the following arguments/values: 10-2, 10-1, 100, 101, 102, etc.

DevExtreme HTML5 JavaScript Charts ContinuousArgumentAxis DevExtreme HTML5 JavaScript Charts DiscreteArgumentAxis DevExtreme HTML5 JavaScript Charts LogarithmicArgumentAxis

Usually, the Chart chooses the axis type automatically according to the type of arguments/values, but you can force the Chart to use a specific axis type by specifying the type property. In addition, you can cast arguments/values to a specific data type using the argumentType/valueType property. You may want to do this if, for example, your data source stores dates as strings.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        argumentAxis: {
            argumentType: 'datetime',
            type: 'discrete'
        },
        valueAxis: {
            valueType: 'numeric'
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxo-argument-axis
        argumentType="datetime"
        type="discrete">
    </dxo-argument-axis>
    <dxi-value-axis
        valueType="numeric">
    </dxi-value-axis>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxArgumentAxis
            argument-type="datetime"
            type="discrete"
        />
        <DxValueAxis
            value-type="numeric"
        />
    </DxChart>
</template>

<script>
import DxChart, {
    DxArgumentAxis,
    DxValueAxis
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxArgumentAxis,
        DxValueAxis
    }
}
</script>
React
App.js
import React from 'react';
import Chart, {
    ArgumentAxis,
    ValueAxis
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <ArgumentAxis
                    argumentType="datetime"
                    type="discrete"
                />
                <ValueAxis
                    valueType="numeric"
                />
            </Chart>
        );
    }
}

export default App;

For better readability of visualized data, any axis is divided into parts using ticks. Different axis types demand ticks to be arranged differently. See the Arrange Axis Ticks topic for further details.

See Also