Remove Data Label on Charts

PHPMaker General Discussion (PHPMaker)
1

How to remove Data Label on Charts in PHPMaker 2021?

2

You may simply use Chart_Rendered server event. Please read Server Events and Client Scripts topic from PHPMaker Help menu for more info and example.

3

I do not know how to do this :confused:

4

Let’s say by using the demo2021 project, you want to hide the data labels for Quarterly Orders by Product bar chart, simply put the following code in Chart_Rendered server event that belongs to that Report:

// var_dump($this->ID); // view chart ID
    $chartData = &$chart->Data;
    $chartOptions = &$chart->Options;
// var_dump($chartData, $chartOptions); // View chart data and options
    if ($this->ID == "Quarterly_Orders_By_Product_OrdersByCategory") { // Check chart ID
        // Your code to customize $chartData and/or $chartOptions;
        // $chartData["labels"][0] = ""; // remove labels index 0 if necessary
        $chartOptions["plugins"]["datalabels"] = false; // remove label contains value on bar
    }
5

It worked!!! Thank you very much!!!

6

how to do it in v2022

7

You may put the following code in Chart_Rendered server event to expose the properties of the Chart:

    var_dump($this->ID); // view chart ID
    $chartData = &$chart->Data;
    $chartOptions = &$chart->Options;
    var_dump($chartData, $chartOptions); // View chart data and options

and then try to use the related properties.

8

Please note that since datalabels is part of [ChartDataLabels] plugin and in v2022 the Chart is initially created in views/layout.php, then we should use Client Scripts instead of Chart_Rendered server event.

9

I have this in v2022 in Summary report - Client Script if anyone needs it

ew.charts["Tabel_Chart1"] = { // Change the id to that of your chart
    options: {
        plugins: {
            datalabels: {
                display: false
                    }
                }
            }
};
10

is there a way to remove labels for all charts instead of repeating following script?

ew.charts["chart_ID"] = { // Change the id to that of your chart
    options: {
        plugins: {
            datalabels: {
                display: false
                    }
                }
            }
};
11

You may set ew.chartConfig in Page_Head server event, e.g.

<script>
ew.chartConfig = {
	options: { ... }
};
</script>