React Chart - dataPrepareSettings

The following code shows the dataPrepareSettings declaration syntax:

$(function() {
    $("#chartContainer").dxChart({
        // ...
        dataPrepareSettings: {
            sortingMethod: false
        }
    });
});

<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 { }

<template>
    <DxChart ... >
        <DxDataPrepareSettings
            :sorting-method="false"
        />
    </DxChart>
</template>

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

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

export default {
    components: {
        DxChart,
        DxDataPrepareSettings
    },
    data() {
        // ...
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
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;

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.

See Also

• argumentAxis.argumentType - casts arguments to a specified data type.
• valueAxis.valueType - casts values to a specified data type.

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.

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.

Alternatively, you can specify the drawing order using a comparison function. It accepts two data source objects and should return the value on which the order will depend. For example, assume that A and B objects represent two series points. If the function returns a value less than 0, point A will be drawn before point B. If the function returns a value greater than 0, point A will be drawn after point B. If the function returns 0, the drawing order of A and B remains unchanged.