Chart Config

This article describes your options for chart configuration and the basic usage.

Structure

{
    colors: ['rgb(195, 49, 73)', 'rgb(168, 194, 86)'], // array of strings
    xaxis: {
        visible: true, // boolean
        labelsEnabled: true, // boolean
        rotation: 'auto', // 'auto' or numeral string
        min: '10', // numeral string
        max: '20' // numeral string
    },
    yaxis: {
        visible: true, // boolean
        labelsEnabled: true, // boolean
        rotation: 'auto', // string
        min: '30', // numeral string
        max: '40' // numeral string
    },
    legend: {
        enabled: true, // boolean
        position: 'bottom', // 'top' | 'left' | 'right' | 'bottom'
    },
    dataLabels: {
        visible: 'auto' // 'auto' | true | false
    },
    grid: {
        enabled: true // boolean
    },
    separators: {
        thousand: ',',
        decimal: '.'
    }
}

Color configuration

Color array example

['rgb(195, 49, 73)', 'rgb(168, 194, 86)']

or

['#fa0510', '#AA2030']

If there are fewer colors than data points, then the colors are repeated. For example, for the two colors and three data points, here is how colors will be used:

['rgb(195, 49, 73)', 'rgb(168, 194, 86)', 'rgb(195, 49, 73)']

To change colors in a chart, provide a config for each component where you want to change colors, or create a wrapped components with a config baked in.

NOTE: Heatmaps use only the first color from the provided colors as the base color, and generate the other colors themselves.

import { Visualization } from '@gooddata/react-components';

// Example of embedding a visualization with custom colors and palette options.
<Visualization
    projectId=<workspace-id>
    identifier=<visualization-id>
    config={{
        colors: ['rgb(195, 49, 73)', 'rgb(168, 194, 86)']
    }}
/>

Custom color palette

If you uploaded a custom color palette to your workspace, the insights created based on the Visualization component use this palette instead of the default colors.

To override the uploaded custom color palette for a specific insight, define the colorPalette property for this insight. The colorPalette property overrides the uploaded custom palette and the colors property, if it has been set for this insight.

import { Visualization } from '@gooddata/react-components';

// Example of embedding a visualization with custom palette.
<Visualization
   projectId=<workspace-id>
   identifier=<visualization-id>
   config={{
       colorPalette: [{
            guid: '01',
            fill: {
                r: 195,
                g: 49,
                b: 73
            }
        }, {
            guid: '02',
            fill: {
                r: 168,
                g: 194,
                b: 86
            }
        }, {
            guid: '03',
            fill: {
                r: 243,
                g: 217,
                b: 177
            }
        }]
    }}
/>

Change legend visibility and position

To hide the legend, set the config.legend.enabled property to false.

To change the legend position, adjust the config.legend.position property ('left'/'right'/'top'/'bottom').

import { Visualization } from '@gooddata/react-components';

// Example of embedding a visualization with a custom legend position.
<Visualization
    projectId=<workspace-id>
    identifier=<visualization-id>
    config={{
        legend: {
            enabled: true,
            position: 'bottom' // 'left', 'right', 'top'
        }
    }}
/>

Change a separator in the number format

To change the thousands separator, adjust the config.separators.thousand property.

To change the decimal separator, adjust the config.separators.decimal property.

import { Visualization } from '@gooddata/react-components';

// Example of embedding a visualization with a custom separator in the number format.
<Visualization
    projectId=<workspace-id>
    identifier=<visualization-id>
    config={{
        separators: {
            thousand: ',',
            decimal: '.'
        }
    }}
/>

Axis configuration

To change axis visibility, set the config.xaxis.visible property.

To hide axis labels, set the config.xaxis.labelsEnabled property to false. When config.xaxis.visible is set to false, axis labels are hidden automatically, regardless of this option.

To rotate axis labels, set config.xaxis.rotation to a desired value.

To set scale of axis, set config.xaxis.min and config.<xaxis>.max.

For y-axis, replace xaxis with yaxis.

import { Visualization } from '@gooddata/react-components';

// Example of embedding a visualization with settings for the x-axis.
<Visualization
    projectId=<workspace-id>
    identifier=<visualization-id>
    config={{
        xaxis: {
            visible: false,
            labelsEnabled: false,
            rotation: '-90',
            min: '150',
            max: '440'
        }
    }}
/>

Canvas configuration

To configure data labels in chart, set config.dataLabels property.

import { Visualization } from '@gooddata/react-components';

// Example of embedding a visualization with settings for the canvas.
<Visualization
    projectId=<workspace-id>
    identifier=<visualization-id>
    config={{
        dataLabels: true,
        grid: {
            enabled: false
        }
    }}
/>

Customize tooltips and fonts

To customize tooltips and fonts, implement a custom visualization.