0 items
Sign in
Buy

Docs

Modifying Chart.js settings with filters

Estimated reading: 7 minutes

Updated on April 24, 2026

GravityCharts uses Chart.js 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.

/**
 * 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.

/**
 * 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 and legend 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 );

Example:

Modify tooltips for all charts. See Tooltips.

/**
 * 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 );

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 );

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 );

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:

Was this page helpful?

Table Of Contents