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 keysdata
,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 palettesdimensions
(optional): An object accepting two keyswidth
andheight
, 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 thetemplate
key is omitted, thedimensions
key and theconfiguration.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:
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' } } } }
When rendered, the above definition produces the following chart: