Modifying image charts in GravityCharts

This feature is currently in beta! If you encounter any issues, please let our support know.

Image charts are generated using the QuickChart API. QuickChart is powerful and allows you to customize the look and feel of the chart. QuickChart generates images from chart configuration settings, which are stored in a format called JSON.

When converting a chart to an image, there may be differences that require tweaking to match the look of the charts exactly. You can modify the chart output by using the gk/gravitycharts/image-charts/quickchart/instance action.

Actions

gk/gravitycharts/image-charts/quickchart/instance

Override QuickChart API settings for the chart.

Example code

Note: This code is PHP. If you're not sure what that is or how to use this filter, we recommend reaching out to a Codeable.io expert who can help with making these changes.

Please refer to the QuickChart docs to see what features are available.

Set chart background color

/**
 * Override QuickChart API settings for the chart.
 * @see https://github.com/typpo/quickchart-php for documentation
 * @param GravityKit\GravityCharts\QuickChart $chart
 * @param array $atts
 */
add_action( 'gk/gravitycharts/image-charts/quickchart/instance', function ( $chart, $atts ) {

    // Only modify chart #17. Remove this condition to modify all charts.
    if( 17 !== (int) $atts['id'] ) {
        return;
    }

    // Set background color to yellow
    $chart->setBackgroundColor( 'rgb(255,255,120)' );
    
}, 10, 2 );

Change the chart title and font

/**
 * Change the chart title to "My Chart" and override font settings.
 *
 * @see https://github.com/typpo/quickchart-php for documentation
 *
 * @param \GravityKit\GravityCharts\QuickChart $chart
 * @param array $atts
 */
add_action( 'gk/gravitycharts/image-charts/quickchart/instance', function ( $chart, $atts ) {

    // Only modify chart #17. Remove this condition to modify all charts.
    if( 17 !== (int) $atts['id'] ) {
        return;
    }

	$config = $chart->getConfig();

	$config['options']['plugins']['title'] = [
		'display' => 1,
		'text' => 'My Chart', // Change the text
		'color' => 'teal', // Color
		'font' => [
			'family' => 'Noto Sans Mono', // Font family. All Noto fonts are valid. {@see https://fonts.google.com/noto/fonts}
			'size' => 32, // Font size in pixels
			'weight' => 700, // Font weight
		],
	];

	$chart->setConfig( $config );

}, 10, 2 );

Add a QuickChart API key for improved speed and customer service

QuickChart offers a Professional plan at $40/mo. Professional plans have no rate limiting, faster chart generation, and access to additional features. If you sign up, you will get an API key. Here's how to add the API key to GravityCharts image charts:

/**
 * Override QuickChart API settings for the chart.
 * @see https://github.com/typpo/quickchart-php for documentation
 * @param GravityKit\GravityCharts\QuickChart $chart
 * @param array $atts
 */
add_action( 'gk/gravitycharts/image-charts/quickchart/instance', function ( $chart, $atts ) {    
    $chart->setApiKey( 'REPLACE_THIS_WITH_YOUR_API_KEY' );
}, 10, 2 );

Use a self-hosted QuickChart installation instead of the default chart service

If you want to run your own instance of QuickChart, you can. It will require updating the host setting. Here's how to do that:

/**
 * Override QuickChart API settings for the chart.
 * @see https://github.com/typpo/quickchart-php for documentation
 * @param GravityKit\GravityCharts\QuickChart $chart
 * @param array $atts
 */
add_action( 'gk/gravitycharts/image-charts/quickchart/instance', function ( $chart, $atts ) {

    // Use QuickCharts.io.
    $chart->setHost( 'quickcharts.io' );
    
    // If you have one, enter your API key.
    $chart->setApiKey( 'YOUR_API_KEY' );
}, 10, 2 );

Print debug output about the chart data being used

If you want to figure out what data is being shown in an image chart, here's some example code:

/**
 * Print debugging information about each chart.
 */
add_action( 'gk/gravitycharts/image-charts/quickchart/instance', function ( $chart, $atts ) {

    // Only show debugging to admins
    if ( ! current_user_can( 'manage_options' ) ) {
        return;
    }

    echo '<h3>Chart Data</h3>';
    echo '<pre>';
    print_r( $chart->getConfig() );
    echo '</pre>';
    
    echo '<h3>Chart Block/Shortcode Attributes</h3>';
    echo '<pre>';
    print_r( $atts );
    echo '</pre>';
}, 20, 3 );