Creating Chart Cards

4. Embed a chart in a custom Card

We can also embed charts into custom Cards - those that may contain other elements such as Liquid views and lists. This way we can create Cards that contain more information than the chart itself, using a chart to supplement the information in the Card.

Using the same connector we created earlier in the guide, this tutorial will outline how to render the same chart, but as an element of a more complex Card.

Create a custom Card

Navigate to Development → Manage Spaces → Global → Components and select New Component.

For template, choose Basic Card (with test data), add a name like custom-chart-card and a title like Custom Chart Card. Similarly to the previous guide, we then need to select Service Type of Service Connectors, set Connector to Chart Connector, and Service to Chart Connector: charts ().

In the newly created component folder, select Designer for default.card. Under the Add Element tab, select the Charts element.

Next, under the Elements tab, select the content element and add the following Liquid markup to the view field:

<div class="p">
    <div class="font-headline pb">
        2018 vs 2019 Sales Report
    </div>
    <div class="font-caption grey">
        Whilst sales volumes have seen a moderate increase this year in the UK as opposed to last year, sales in Germany are down and USA sales have seen a drastic drop of 30%. For the full report, <a class="blue">see here</a>
    </div>
</div>

Finally, Save default.card and head to the Digital Assistant Workplace. Select Add or remove Cards and find the Custom Chart Card we created, then toggle Pin card to Workplace.

Navigate back to the Workplace, and you should now see the following card:

Select Next below for a tutorial on a more complex scenario, where you might wish to display multiple charts in the same Card.