AG-Grid 图表上的格式标签

Question

How can I format the labels that appear on AG-Grid chart's axis? I have a lot of time-series data so I expect users frequently to produce charts where the horizontal axis is a date. Unfortunately, this produces unreadable chart labels because the dates are not formatted (see attached image) - The labels look like "Thu Jan 09 2020 00:00:00 GMT+0000 (Greenwich Mean Time)" when all I would like is simply "2020-01-09". My The dates in the grid look fine thanks to a valueFormatter for dates.

It is also very common for users to produce pivot tables using the date. This produces similarly terrible results for the labels, but I've found I can use "processSecondaryColGroupDef" to format dates that appear in the column headers. Is there a similar way to do this for charts?

Thankyou, Troy.

Answer 1

From the docs -

For time axes, a format string can be provided, which will be used to format the data for display as axis labels

You can either explicitly set the axis type to 'time', but you can also remove this and the chart will still use the time axis as it automatically detects the axis type from the data in the Date column.

You can implement processChartOptions callback and add your customizations -

processChartOptions(params) {
    var options = params.options;
    var dateFormatter = function(params) {
      return params.value.value && para[enter link description here][1]ms.value.value.toLocaleDateString
        ? params.value.value.toLocaleDateString()
        : params.value;
    };
    if (["line"].indexOf(params.type) < 0) {
      if (options.xAxis && options.yAxis) {
        options.xAxis.label.formatter = dateFormatter;
        options.yAxis.label.formatter = dateFormatter;
      }
    } else {
      options.xAxis.type = "time";
      options.xAxis.label.format = "%d %B";
    }

Example and details here