How to Change Axis Label Color During JavaScript Chart Export?

This article demonstrates how to dynamically change the axis label colors before and after export using JavaScript charting libraries that support beforeExport and afterExport events.

Implementation Details

Use the beforeExport and afterExport event hooks to temporarily modify the axis label colors:

• beforeExport: Set axis label colors(chart.primaryXAxis.labelStyle.color) to black for better contrast in the exported output.
• afterExport: Revert axis label colors(chart.primaryXAxis.labelStyle.color) to their original state (e.g., white for dark-themed charts).

Code Example

var chart = new ej.charts.Chart({
    .....
     beforeExport: function (args) {
       chart.primaryXAxis.labelStyle.color = 'black';
       chart.primaryYAxis.labelStyle.color = 'black';
       chart.dataBind();
     },
     afterExport: function (args) {
       chart.primaryXAxis.labelStyle.color = 'white';
       chart.primaryYAxis.labelStyle.color = 'white';
       chart.dataBind();
     },
   });
   chart.appendTo('#syncfchart-container'); 

Output

Before Export

After Export

Live Demo

Explore a working example on StackBlitz: Live Sample