---
title: "Modifying Chart.js settings with filters"
date: 2026-04-23
author: "GravityKit"
link: "https://www.gravitykit.com/docs/gravitycharts/modifying-chart-js-settings-with-filters/"
---

GravityCharts uses [Chart.js](https://www.chartjs.org/) to render interactive charts. You can customize the Chart.js configuration using WordPress filters to modify chart appearance and behavior beyond the settings available in the GravityCharts interface.

## `gk/gravitycharts/chart-library-options` filter

Modifies the default Chart.js options that apply to **all charts** across your site.

**Parameters**:

- `$fields` (array) - Array of default Chart.js settings
- `$library` (string) - Name of the charting library being used (currently "Chart.js")

**Example**:

Change border settings. See [line styling](https://www.chartjs.org/docs/latest/charts/line.html#line-styling).

```
/**
 * Customize borders for all GravityCharts.
 *
 * @param array  $fields  Array of default Chart.js settings.
 * @param string $library Name of the charting library being used.
 *
 * @return array Modified Chart.js settings.
 */
add_filter( 'gk/gravitycharts/chart-library-options', function( $fields, $library ) {
    if ( empty( $fields ) ) {
        return $fields;
    }
    
    // Modify border appearance
    $fields['borderWidth'] = 2;
    $fields['borderJoinStyle'] = 'bevel';

    return $fields;
}, 10, 2 );
```

```
/**
 * Customize borders for all GravityCharts.
 *
 * @param array  $fields  Array of default Chart.js settings.
 * @param string $library Name of the charting library being used.
 *
 * @return array Modified Chart.js settings.
 */
add_filter( 'gk/gravitycharts/chart-library-options', function( $fields, $library ) {
    if ( empty( $fields ) ) {
        return $fields;
    }
    
    // Modify border appearance
    $fields['borderWidth'] = 2;
    $fields['borderJoinStyle'] = 'bevel';

    return $fields;
}, 10, 2 );
```

**Example**:

Enable animations and customize timing. See [animations](https://www.chartjs.org/docs/latest/configuration/animations.html).

```
/**
 * Enable animations with custom duration and easing.
 *
 * @param array  $fields  Array of default Chart.js settings.
 * @param string $library Name of the charting library being used.
 *
 * @return array Modified Chart.js settings.
 */
add_filter( 'gk/gravitycharts/chart-library-options', function( $fields, $library ) {
    // Enable animations with custom duration
    $fields['animation'] = [
        'duration' => 1000,
        'easing' => 'easeInOutQuart'
    ];

    return $fields;
}, 10, 2 );
```

```
/**
 * Enable animations with custom duration and easing.
 *
 * @param array  $fields  Array of default Chart.js settings.
 * @param string $library Name of the charting library being used.
 *
 * @return array Modified Chart.js settings.
 */
add_filter( 'gk/gravitycharts/chart-library-options', function( $fields, $library ) {
    // Enable animations with custom duration
    $fields['animation'] = [
        'duration' => 1000,
        'easing' => 'easeInOutQuart'
    ];

    return $fields;
}, 10, 2 );
```

## `gk/gravitycharts/api/chart/options` 

Modifies the Chart.js options for a **specific chart** (identified by feed ID). This filter is more targeted and allows you to customize individual charts differently.

**Parameters**:

- `$response` (array) - The chart options
- `$feed_id` (int) - The GravityCharts feed ID

**Example**:

Customize the [title](https://www.chartjs.org/docs/latest/configuration/title.html) and [legend](https://www.chartjs.org/docs/latest/configuration/legend.html) for a specific chart by feed ID

```
/**
 * Customize title and legend for a specific chart.
 *
 * @param array $response The chart options.
 * @param int   $feed_id  The GravityCharts feed ID.
 *
 * @return array Modified chart options.
 */
add_filter( 'gk/gravitycharts/api/chart/options', function( $response, $feed_id ) {
    // Only modify chart with feed ID 5
    if ( $feed_id !== 5 ) {
        return $response;
    }

    // Add custom title (Chart.js 3.x uses plugins.title)
    $response['plugins']['title'] = [
        'display' => true,
        'text' => 'Custom Chart Title'
    ];

    // Customize legend (Chart.js 3.x uses plugins.legend)
    $response['plugins']['legend'] = [
        'display' => true,
        'position' => 'bottom',
        'labels' => [
            'color' => '#333'
        ]
    ];

    return $response;
}, 10, 2 );
```

```
/**
 * Customize title and legend for a specific chart.
 *
 * @param array $response The chart options.
 * @param int   $feed_id  The GravityCharts feed ID.
 *
 * @return array Modified chart options.
 */
add_filter( 'gk/gravitycharts/api/chart/options', function( $response, $feed_id ) {
    // Only modify chart with feed ID 5
    if ( $feed_id !== 5 ) {
        return $response;
    }

    // Add custom title (Chart.js 3.x uses plugins.title)
    $response['plugins']['title'] = [
        'display' => true,
        'text' => 'Custom Chart Title'
    ];

    // Customize legend (Chart.js 3.x uses plugins.legend)
    $response['plugins']['legend'] = [
        'display' => true,
        'position' => 'bottom',
        'labels' => [
            'color' => '#333'
        ]
    ];

    return $response;
}, 10, 2 );
```

**Example**:

Modify tooltips for all charts. See [Tooltips](https://www.chartjs.org/docs/latest/configuration/tooltip.html).

```
/**
 * Customize tooltip appearance and behavior.
 *
 * @param array $response The chart options.
 * @param int   $feed_id  The GravityCharts feed ID.
 *
 * @return array Modified chart options.
 */
add_filter( 'gk/gravitycharts/api/chart/options', function( $response, $feed_id ) {
    if ( empty( $response ) ) {
        return $response;
    }

    // Customize tooltip settings (Chart.js 3.x)
    $response['plugins']['tooltip'] = [
        'enabled' => true,
        'backgroundColor' => 'rgba(0, 0, 0, 0.9)',
        'titleColor' => '#fff',
        'bodyColor' => '#fff',
        'borderColor' => '#666',
        'borderWidth' => 1,
        'cornerRadius' => 6,
        'displayColors' => true,
        'padding' => 12,
        'boxPadding' => 6
    ];

    return $response;
}, 10, 2 );
```

```
/**
 * Customize tooltip appearance and behavior.
 *
 * @param array $response The chart options.
 * @param int   $feed_id  The GravityCharts feed ID.
 *
 * @return array Modified chart options.
 */
add_filter( 'gk/gravitycharts/api/chart/options', function( $response, $feed_id ) {
    if ( empty( $response ) ) {
        return $response;
    }

    // Customize tooltip settings (Chart.js 3.x)
    $response['plugins']['tooltip'] = [
        'enabled' => true,
        'backgroundColor' => 'rgba(0, 0, 0, 0.9)',
        'titleColor' => '#fff',
        'bodyColor' => '#fff',
        'borderColor' => '#666',
        'borderWidth' => 1,
        'cornerRadius' => 6,
        'displayColors' => true,
        'padding' => 12,
        'boxPadding' => 6
    ];

    return $response;
}, 10, 2 );
```

## `gk/gravitycharts/api/chart/data` 

Modifies the **chart data** (values, labels, datasets) for a specific chart. This filter allows you to customize the actual data being displayed rather than just the visual settings.

**Parameters**:

- `$chart_data` (array) - The chart data object (contains datasets, labels, etc.)
- `$feed` (array) - The GravityCharts feed object
- `$context` (string) - The chart context (`default` or `timeline` )

```
/**
 * Modify chart data labels and values.
 *
 * @param array  $chart_data The chart data.
 * @param array  $feed       The Feed object.
 * @param string $context    The chart context.
 *
 * @return array Modified chart data.
 */
add_filter( 'gk/gravitycharts/api/chart/data', function( $chart_data, $feed, $context ) {
    if ( empty( $chart_data ) ) {
        return $chart_data;
    }

    // Modify labels
    if ( isset( $chart_data['labels'] ) ) {
        $chart_data['labels'] = array_map( 'strtoupper', $chart_data['labels'] );
    }

    // Modify dataset values
    if ( isset( $chart_data['datasets'][0]['data'] ) ) {
        // Add 10 to each value
        $chart_data['datasets'][0]['data'] = array_map( function( $value ) {
            return $value + 10;
        }, $chart_data['datasets'][0]['data'] );
    }

    return $chart_data;
}, 10, 3 );
```

```
/**
 * Modify chart data labels and values.
 *
 * @param array  $chart_data The chart data.
 * @param array  $feed       The Feed object.
 * @param string $context    The chart context.
 *
 * @return array Modified chart data.
 */
add_filter( 'gk/gravitycharts/api/chart/data', function( $chart_data, $feed, $context ) {
    if ( empty( $chart_data ) ) {
        return $chart_data;
    }

    // Modify labels
    if ( isset( $chart_data['labels'] ) ) {
        $chart_data['labels'] = array_map( 'strtoupper', $chart_data['labels'] );
    }

    // Modify dataset values
    if ( isset( $chart_data['datasets'][0]['data'] ) ) {
        // Add 10 to each value
        $chart_data['datasets'][0]['data'] = array_map( function( $value ) {
            return $value + 10;
        }, $chart_data['datasets'][0]['data'] );
    }

    return $chart_data;
}, 10, 3 );
```

**Example**:

Add custom dataset to existing chart data

```
/**
 * Add a custom dataset to chart data.
 *
 * @param array  $chart_data The chart data.
 * @param array  $feed       The Feed object.
 * @param string $context    The chart context.
 *
 * @return array Modified chart data.
 */
add_filter( 'gk/gravitycharts/api/chart/data', function( $chart_data, $feed, $context ) {
    if ( empty( $chart_data ) || empty( $chart_data['datasets'] ) ) {
        return $chart_data;
    }

    // Only add custom dataset for feed ID 3
    if ( ! isset( $feed['id'] ) || $feed['id'] !== 3 ) {
        return $chart_data;
    }

    // Add a trend line dataset
    $chart_data['datasets'][] = [
        'label' => 'Trend Line',
        'data' => [ 5, 10, 15, 20, 25 ], // Your custom data
        'borderColor' => '#ff0000',
        'backgroundColor' => 'transparent',
        'borderDash' => [ 5, 5 ],
        'type' => 'line'
    ];

    return $chart_data;
}, 10, 3 );
```

```
/**
 * Add a custom dataset to chart data.
 *
 * @param array  $chart_data The chart data.
 * @param array  $feed       The Feed object.
 * @param string $context    The chart context.
 *
 * @return array Modified chart data.
 */
add_filter( 'gk/gravitycharts/api/chart/data', function( $chart_data, $feed, $context ) {
    if ( empty( $chart_data ) || empty( $chart_data['datasets'] ) ) {
        return $chart_data;
    }

    // Only add custom dataset for feed ID 3
    if ( ! isset( $feed['id'] ) || $feed['id'] !== 3 ) {
        return $chart_data;
    }

    // Add a trend line dataset
    $chart_data['datasets'][] = [
        'label' => 'Trend Line',
        'data' => [ 5, 10, 15, 20, 25 ], // Your custom data
        'borderColor' => '#ff0000',
        'backgroundColor' => 'transparent',
        'borderDash' => [ 5, 5 ],
        'type' => 'line'
    ];

    return $chart_data;
}, 10, 3 );
```

**Example**:

Filter data based on conditions

```
/**
 * Filter chart data based on value thresholds.
 *
 * @param array  $chart_data The chart data.
 * @param array  $feed       The Feed object.
 * @param string $context    The chart context.
 *
 * @return array Modified chart data.
 */
add_filter( 'gk/gravitycharts/api/chart/data', function( $chart_data, $feed, $context ) {
    if ( empty( $chart_data ) || ! isset( $chart_data['datasets'][0]['data'] ) ) {
        return $chart_data;
    }

    $threshold = 100;
    $filtered_labels = [];
    $filtered_data = [];

    // Only include data points above threshold
    foreach ( $chart_data['datasets'][0]['data'] as $index => $value ) {
        if ( $value >= $threshold ) {
            $filtered_labels[] = $chart_data['labels'][ $index ];
            $filtered_data[] = $value;
        }
    }

    $chart_data['labels'] = $filtered_labels;
    $chart_data['datasets'][0]['data'] = $filtered_data;

    return $chart_data;
}, 10, 3 );
```

```
/**
 * Filter chart data based on value thresholds.
 *
 * @param array  $chart_data The chart data.
 * @param array  $feed       The Feed object.
 * @param string $context    The chart context.
 *
 * @return array Modified chart data.
 */
add_filter( 'gk/gravitycharts/api/chart/data', function( $chart_data, $feed, $context ) {
    if ( empty( $chart_data ) || ! isset( $chart_data['datasets'][0]['data'] ) ) {
        return $chart_data;
    }

    $threshold = 100;
    $filtered_labels = [];
    $filtered_data = [];

    // Only include data points above threshold
    foreach ( $chart_data['datasets'][0]['data'] as $index => $value ) {
        if ( $value >= $threshold ) {
            $filtered_labels[] = $chart_data['labels'][ $index ];
            $filtered_data[] = $value;
        }
    }

    $chart_data['labels'] = $filtered_labels;
    $chart_data['datasets'][0]['data'] = $filtered_data;

    return $chart_data;
}, 10, 3 );
```

## Which filter should I use?

**Use** `gk/gravitycharts/chart-library-options` when:

- You want to set defaults for **all charts** on your site
- You're changing global Chart.js behavior (animations, borders, etc.)
- You want consistent settings across multiple charts

**Use** `gk/gravitycharts/api/chart/options` when:

- You need to customize a **specific chart** differently
- You're targeting charts by feed ID
- You need different settings for different charts

**Use** `gk/gravitycharts/api/chart/data` when:

- You need to modify the actual **data values or labels**
- You want to add, remove, or filter datasets
- You're performing calculations on data values
- You need to transform data before it's displayed

## Chart.js Documentation

For a complete list of available Chart.js options and configurations, refer to the official Chart.js documentation:

- [Chart.js Documentation](https://www.chartjs.org/docs/latest/)
- [Configuration Options](https://www.chartjs.org/docs/latest/configuration/)