Defining a chart in a Connector

Though our chart elements use Chart.js, and for the most part are configured in the same way, we wrap the Chart.js configuration in our own object, which we will refer to as the chart definition.

Chart definition structure

The chart definition contains up to four keys, configuration, template, palette and dimensions. The purpose and contents of these keys are as follows:

• configuration (required): Contains a Chart.js configuration, exactly as described in the Chart.js documentation - that is the object that contains the keys data, options, etc.
• template (optional): A string value taking the name of one of our provided templates.
• palette (optional): A string value taking the name of one of our provided color palettes
• dimensions (optional): An object accepting two keys width and height, which you can use to set a custom aspect ratio for your chart.

Despite being technically optional, we recommend that a template is always used as a basis for a chart - any modification in the configuration will simply override the template's defaults.

If you absolutely require to create a chart from a 'blank slate' without any default styling applied, the template key can be omitted. When the template key is omitted, the dimensions key and the configuration.type Chart.js value must be set, or the chart will not render.

Position in the connector response

Within your connector script, the definition object should be attached to activity.Response.Data.chart, this way the chart element in the Card will automatically be able to see and render it.

It can be attached elsewhere, if you require a special use case such as having multiple charts, provided the modelRoot of the chart element in the Card is changed accordingly to point to the new location.

Example

A simple chart definition object would be as follows:

Copy to clipboard
activity.Response.Data.chart = {
    template: 'bar',
    palette: 'office.Office6',
    configuration: {
        data: {
            labels: ['UK', 'USA', 'Germany'],
            datasets: [
                {
                    label: '2018',
                    data: [143, 496, 284]
                },
                {
                    label: '2019',
                    data: [186, 348, 232]
                }
            ]
        },
        options: {
            title: {
                display: true,
                text: 'Order Volume'
            }
        }
    }
}
Expand (25 lines)

When rendered, the above definition produces the following chart: