The "Chart" slide let you draw easily charts in your presentation.
Have a look at this video where we demonstrate how to use it!
This template could be added to your presentation using the following methods.
If you are using our Starter Kit, no need to worry about this, this template is included, therefore you could skip the "Installation" chapter.
It's recommended to use unpkg if you want to use this template from a CDN. To do so, add the following include script in the main HTML file of your project:
<script type="module" src="https://unpkg.com/@deckdeckgo/slide-chart@latest/dist/deckdeckgo-slide-chart/deckdeckgo-slide-chart.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@deckdeckgo/slide-chart@latest/dist/deckdeckgo-slide-chart/deckdeckgo-slide-chart.js"></script>To install this template in your project from npm run the following command:
npm install @deckdeckgo/slide-chartThe Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.
That being said, commonly, you might either import or
load it:
import '@deckdeckgo/slide-chart';import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-chart/dist/loader';
deckDeckGoSlideElement();The "Chart" slide's Web Component could be integrated using the tag
<deckgo-slide-chart/>.
<deckgo-slide-chart src="./assets/csv/data-pie-chart.csv">
<h1 slot="title">My Pie chart</h1>
</deckgo-slide-chart>The slot
title is optional.
Optionally a slot
notes could be use to add some notes regarding the particular slide. These will be automatically
displayed in the remote control.
If you are using the
DeckDeckGo starter kit and wish to make your notes accessible to anyone, you will need to mark them with the attribute
show.
The slide "Chart" relies on the charts components
<deckgo-pie-chart/>,
<deckgo-line-chart/> and <deckgo-bar-chart/> which are described in the components
documentation.
The DeckDeckGo charts components are provided in separate extra library. If you don't use the DeckDeckGo starter kit and wish to add the DeckDeckGo chart to your project, you will need to install and integrate it from a CDN or npm as described in its installation guide.
This component offers the following options which could be set using attributes:
| Attribute | Type | Default | Description |
|---|---|---|---|
| type | string | pie | The type of the chart,
pie, line or bar |
| custom-background | boolean | false | If you would provide a background for the all deck and a specific one for this slide, set this option to
true |
| custom-actions | boolean | false | If you would provide actions for the all deck and a specific one for this slide, set this option to
true |
Furthermore, this slide component offers the same attributes as the DeckDeckGo charts Web Component, see its documentation for the details.
The following theming options will affect this component if set on its host or parent.
| CSS4 variable | Default | Note |
|---|---|---|
| --background | ||
| --color | ||
| --slide-padding-top | 16px | Padding top of the all slide |
| --slide-padding-end | 32px | Padding right of the all slide |
| --slide-padding-bottom | 16px | Padding bottom of the all slide |
| --slide-padding-start | 32px | Padding left of the all slide |
| --zIndex | 1 | The z-index of the slide |
Furthermore, this slide component offers the exact same CSS4 variables as the DeckDeckGo charts Web Component, see its documentation for the details.
The slide "Chart" exposes the following methods:
In case you would like to draw or redraw your chart.
const slide = deck.getElementsByTagName('deckgo-slide-chart');
await slide.draw();