Box
Map

JavaScript/jQuery Chart - dataPrepareSettings

Processes data before visualizing it.

Type:

Object

The following code shows the dataPrepareSettings declaration syntax:

jQuery
index.js
$(function() {
    $("#chartContainer").dxChart({
        // ...
        dataPrepareSettings: {
            sortingMethod: false
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-chart ... >
    <dxo-data-prepare-settings
        [sortingMethod]="false">
    </dxo-data-prepare-settings>
</dx-chart>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxChart ... >
        <DxDataPrepareSettings
            :sorting-method="false"
        />
    </DxChart>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxChart, {
    DxDataPrepareSettings 
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxDataPrepareSettings
    },
    data() {
        // ...
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Chart, {
    DataPrepareSettings 
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <DataPrepareSettings
                    sortingMethod={false}
                />
            </Chart>
        );
    }
}
export default App;

checkTypeForAllData

Validates the type of each value coming from the data source.

Type:

Boolean

Default Value: false

Use this property when values in your data source are of a different type, and you need all of them to be visualized on a single axis.

If this property is set to true, the type of each value is checked, and the axis type is chosen optimally to display all the values. Otherwise, only the type of the first value is checked, and the axis type is chosen according to the type of this value. In this case, the values that cannot be cast to a data type supported by the axis will be ignored.

NOTE
Because the type check affects UI component performance, keep this property set to false when you have a vast data source with values of the same type, and this type is known beforehand.
See Also
  • argumentAxis.argumentType - casts arguments to a specified data type.
  • valueAxis.valueType - casts values to a specified data type.

convertToAxisDataType

Converts data coming from a data source into a data type supported by the axis.

Type:

Boolean

Default Value: true

If this property is set to true, all data will be converted into a data type supported by the axis. You can specify this data type using the argumentAxis.argumentType and valueAxis.valueType properties. Otherwise, it will be determined automatically on the base of the first data source value.

NOTE
We recommend you to keep this property set to true in order to prevent the chart from behaving incorrectly. However, since the type conversion affects UI component performance, it may be useful to set this property to false if you have a vast data source with values of the same type, and this type is known beforehand.

sortingMethod

Specifies the sorting order in which series points should be drawn.

Type:

Boolean

|

Function

Function parameters:
a:

Object

A data source object to be compared.

b:

Object

A data source object to be compared.

Return Value:

Number

Specifies whether a goes before b.

Default Value: true

When this property is set to true, the series points are drawn in order of increasing argument. Otherwise, the order of drawing the series points is the same as the order of objects in the data source.

NOTE
We recommend setting this property to false if objects in the data source are already sorted properly. This will improve UI component performance.
NOTE
When the argumentType is 'numeric' or 'datetime', the sortingMethod property does not affect the argument axis. If you want to display arguments in descending order, enable the inverted property.

Alternatively, you can use a comparison function to specify the drawing order. The function accepts two data source objects and should return the value on which the order depends. For example, A and B objects represent two series points. If the function returns a value less than 0, point A is drawn before point B. If the function returns a value greater than 0, point A is drawn after point B. If the function returns 0, the drawing order of A and B remains unchanged.

NOTE
When the argumentType is 'string', the sortingMethod property does not accept Boolean values. However, you can still apply sorting using a comparison function. Alternatively, use the categories array to perform the same task. Note that the categories array has priority over the sortingMethod function.

The following code sorts string arguments in alphabetical order:

jQuery
index.js
$(function() {
    $("#chartContainer").dxChart({
        // ...
        dataPrepareSettings: {
            sortingMethod(a, b) {
                return a.arg.localeCompare(b.arg);
            }
        }
    });
});
Angular
app.component.html
app.component.ts
<dx-chart ... >
    <dxo-data-prepare-settings
        [sortingMethod]="alphabetical">
    </dxo-data-prepare-settings>
</dx-chart>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    alphabetical(a, b) {
        return a.arg.localeCompare(b.arg);
    }
}
Vue
App.vue
<template>
    <DxChart ... >
        <DxDataPrepareSettings
            :sorting-method="alphabetical"
        />
    </DxChart>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxChart, {
    DxDataPrepareSettings
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxDataPrepareSettings,
    },
    data() {
        // ...
    },
    methods: {
        alphabetical(a, b) {
            return a.arg.localeCompare(b.arg);
        }
    }
}
</script>
React
App.js
import React from 'react';
import Chart, {
    DataPrepareSettings 
} from 'devextreme-react/chart';

const alphabetical = (a, b) => {
    return a.arg.localeCompare(b.arg);
}

function App() {
    render() {
        return (
            <Chart ... >
                <DataPrepareSettings
                    sortingMethod={alphabetical}
                />
            </Chart>
        );
    }
}
export default App;