How to sort (order) the bar chart upon rendering

[Keith Rosenbauer]

I'm sure I'm just missing this, but can't seem to locate in the docs, but how to get this chart to render so the highest sales categories are at the top, not the bottom (sort / order this from highest/greatest to lowest/least)?

Current code:

<ChartComponent

id="ProdCatBarChart"

key={forceUpdate}

className={classes.flexContainer}

style={{ textAlign: 'center' }}

legendSettings={{ enableHighlight: true }}

primaryXAxis={{

valueType: 'Category',

majorGridLines: { width: 0 },

}}

primaryYAxis={{

valueType: 'Double',

labelFormat: '${value}',

edgeLabelPlacement: 'Shift',

majorTickLines: { width: 0 },

lineStyle: { width: 0 },

}}

axisLabelRender={changeLabels.bind(this)}

chartArea={{ border: { width: 0 } }}

load={load.bind(this)}

width={'100%'}

tooltip={{ enable: true }}

palettes={palette}

>

<ChartsInject

services={[

BarSeries,

DataLabel,

Category,

Legend,

Tooltip,

Highlight,

]}

/>

<SeriesCollectionDirective>

<SeriesDirective

dataSource={yoySalesParentReportRes?.categorySales}

xName="category_name"

yName="current_ytd"

type="Bar"

columnSpacing={0.2}

columnWidth={10}

/>

</SeriesCollectionDirective>

</ChartComponent>

[Swetha Babu]

Hi Keith,

Greetings from Syncfusion.

You can sort the data in the chart using the sort method. This method takes three arguments: the chart data, the axis along which the sorting should occur, and a Boolean value indicating whether to sort the data in ascending or descending order. After sorting, the resultant data should be assigned to the dataSource in the chart's series. We have created a react application to demonstrate the same. Please find the below stackblitz link for your reference.

Sample link: https://stackblitz.com/edit/react-q8yeis-mf8fan?file=index.js

Code Snippet:

const load = (args) => {

        let sortedData = sort(data1, ['y'], false);

        args.chart.series[0].dataSource = sortedData;

    };

 

Screenshot:

Kindly revert us if you have any concerns.

Regards,

Swetha

[Keith Rosenbauer]

Thank you, works perfectly .. I did a search in the documentation for "sort" and didn't find anything, so my apologies for having 

[Swetha Babu]

Keith,

Most Welcome! Please get back to us if you need any other assistance.