All docs
V20.2
21.1 (CTP)
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Skip Weekends and Holidays

If your dataset excludes non-working days, you can skip them on the axis as well by setting the workdaysOnly property to true. Use the workWeek array to specify which days are workdays. You can also include or exclude specific dates from the axis using the singleWorkdays and holidays arrays respectively.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        argumentAxis: {
            workdaysOnly: true,
            workWeek: [0, 1, 2, 3, 4, 5],
            holidays: ["2017/1/16", "2017/2/20", "2017/5/29"]
            singleWorkdays: ["2017/1/1"]
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxo-argument-axis
        [workdaysOnly]="true"
        [workWeek]="[0, 1, 2, 3, 4, 5]"
        [holidays]="['2017/1/16', '2017/2/20', '2017/5/29']"
        [singleWorkdays]="['2017/1/1']">
    </dxo-argument-axis>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxArgumentAxis
            :workdays-only="true"
            :work-week="[0, 1, 2, 3, 4, 5]"
            :holidays="['2017/1/16', '2017/2/20', '2017/5/29']"
            :single-workdays="['2017/1/1']"
        />
    </DxChart>
</template>

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

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

const workWeek = [0, 1, 2, 3, 4, 5];
const holidays = ['2017/1/16', '2017/2/20', '2017/5/29'];
const singleWorkdays = ['2017/1/1'];

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <ArgumentAxis
                    workdaysOnly={true}
                    workWeek={workWeek}
                    holidays={holidays}
                    singleWorkdays={singleWorkdays}
                />
            </Chart>
        );
    }
}

export default App;
NOTE
This feature is available for the argument axis only.