Bar Chart Customizations

[Keith Rosenbauer]

Have really a two part question on the Bar Chart here.

First, hopefully an easy one ... But how can the bottom (Y) axis be customized so that it shows anything in the thousands with a "K" (so $40,000 is $40K ... $100,000 is $100K)?  I've managed to do this using the Aggregate part of Data Grid with some custom code, but unclear on how to customize the label format for the Bar Chart.

Second question ... How can I detect a click event on a specific bar in the bar chart?  What I am trying to build is the ability to drill into a product category (there is a hierarchy) and show the selected category's sub-categories.  I have an API endpoint that will return the necessary data for me upon passing in the parent category (it's database table ID), so I would somehow need to detect the ID (database ID) of the category that is selected, make an API call and then re-render the chart (I would show some custom control to drill back up a level).  I do see the onClick event on the ChartComponent, but I am not seeing how to determine what category was selected (and do not see how to re-render the component based on this).  Thanks!

Attachment: barchart.png_507d95fe.zip

[Keith Rosenbauer]

Visual in the attached Zip, but also pasting here for reference

[Swetha Babu]

Hi Keith,

Greetings from Syncfusion.

Please find the below response for your queries.

Query1: How to customize the axis labels?

You can customize the axis labels by using the text argument in the axisLabelRender event in the chart. 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-4uajru-q5cldd?file=index.js

Code Snippet:

const changeLabels = (args) => {

        if (args.axis.name === 'primaryYAxis') {

            var value = parseInt(args.text);

            if (value >= 0 && value < 99999) {

                args.text = '$' + value / 1000 + 'K';

            }

        }

    };

 

Screenshot:

Query2: How to drilldown the chart?

You can drill down the chart using the chartMouseClick event of the chart. When clicking on the bar, the event gets triggered, then you can change the dataSource and refresh the chart using the refresh method in the chart. However, 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-4y2ej7-x4bhb3?file=index.js

Code Snippet:

const onChartMouseClick = (args) => {

        let index = indexFinder(args.target);

        if (isparent && document.getElementById('charts_Series_' + index.series + '_Point_' + index.point)) {

            isparent = false;

            switch (index.point) {

                case 0:

                    chart.current.series[0].dataSource = suvs;

                    setTitleContent('Automobile Sales in the SUV Segment');

                    setTextContent('SUV');

                    break;

                case 1:

                             //….

            }

            chart.current.refresh();

        }

    };

Screenshot:

Before Drilldown:

After clicking on PickUp bar:

Kindly revert us if you have any concerns.

Regards,

Swetha

[Keith Rosenbauer]

This is great, thank you very much for the guidance and quic

[Swetha Babu]

Keith,

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