A collection of Web Components to easily draw charts

DeckDeckGo - Charts

Create a lightweight presentation using Web Components.

DeckDeckGo let you create without effort your slides and allows you to add some extra interactive features with the help of the Ionic components.

For the editing, DeckDeckGo supports both HTML or Markdown.

Moreover, DeckDeckGo bundles your presentation with services workers letting you publish it online as a Progressive Web App.

Cherry on the cake �� DeckDeckGo comes with its Progressive Web App that allows you to remote control your presentation �

Table of contents

Charts

This project has for goal to let you easily add charts to your DeckDeckGo presentation.

To create and draw the charts, this project is using D3js.

However, this Web Component could be use with or without DeckDeckGo respectively could be use as a plotter library in any web projects.

Getting Started

The DeckDeckGo charts Web Component could be use directly in your project from a CDN, using a simple script include, or could be installed from npm.

Using DeckDeckGo charts from a CDN

It's recommended to use unpkg to use the DeckDeckGo charts from a CDN. To do so, add the following include script in the main HTML file of your project:

<script src="https://unpkg.com/deckdeckgo-charts@latest/dist/deckdeckgo-charts.js"></script>

Install DeckDeckGo charts from NPM

Install DeckDeckGo charts in your project from npm using the following command:

npm install deckdeckgo-charts

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

Showcase

The following examples are the one provided in the src/index.html of this component. If you would like to run them locally, proceed as follow:

git clone https://github.com/deckgo/deckdeckgo-charts
cd deckdeckgo-charts
npm install
npm run start

Pie

Donut

Compare two graphs

Line and area

Compare two lines and smoothing effect

Compare two lines and display a grid

Bar

Compare multiple bars

Usage

The main idea behind the DeckDeckGo charts is to be able to drop a csv file, provide it to the component and let it do the job respectively draw the chart.

Pie usage

The <deckgo-pie-chart/> Web Component draw a Pie chart.

CSV

The csv file should contains one or two columns. The values could be provided as number or percent.

Single column

If a single column is used, it should contains the values.

60
20
20
Two columns

If two columns are provided, the first column should contains the description of the value.

Wind;53.13%
Solar:1.96%
Geothermal;7.52%
Landfill Gas;15.67%
Biomass;14.79%
Qualified Hydropower;6.93%

Properties

The <deckgo-pie-chart/> expose the following properties:

Property Attribute Mandatory Description Type Default
src src X The path to the source file of the data string
width width X The width of the chart number
height height X The height of the chart number
innerRadius inner-radius To plot a donut instead of a pie, provide an inner radius number 0
range range A list of custom colors which should be to draw the chart string[]
separator separator The line separator use in your csv file string ';'

Styling

The <deckgo-pie-chart/> could be styled using the following CSS4 variables:

CSS4 variable Default Note
--deckgo-chart-text-color The color of the labels
--deckgo-chart-text-display The display property of the labels
--deckgo-chart-path-stroke The stroke property of the pie, in case you would like to display a line between the slices

Methods

The <deckgo-pie-chart/> expose the following method in case you would like to redraw your chart, for example on resize of the window:

draw() => Promise<void>

Examples

You could find other examples of pie charts in the src/index.html of the project.

<deckgo-pie-chart width="500" height="400" src="https://raw.githubusercontent.com/fluster/deckdeckgo-charts/master/showcase/data-pie-chart.csv"></deckgo-pie-chart>

Line usage

The <deckgo-line-chart/> Web Component draw a line chart.

CSV

The csv file should contains two or three columns.

The first column contains the values for the x axis. These should be provided as date or number.

The second and third columns contains the values for the y axis. These should be provided as number.

Two columns

With dates as x axis:

01.01.2018;5
01.03.2018;10
01.06.2018;8

With numbers as x axis:

1;5
2;10
3;8
Three columns

The third columns is optional, it could be use in case you would like to plot two charts on the same graph.

With dates as x axis:

01.01.2018;5;4
01.03.2018;10;3
01.06.2018;8;19

With numbers as x axis:

1;5;7
2;10;13
3;8;5

Properties

The <deckgo-line-chart/> expose the following properties:

Property Attribute Mandatory Description Type Default
src src X The path to the source file of the data string
width width X The width of the chart number
height height X The height of the chart number
marginBottom margin-bottom The margin bottom of the chart in pixel number 32
marginLeft margin-left The margin left of the chart in pixel number 32
marginRight margin-right The margin right of the chart in pixel number 32
marginTop margin-top The margin top of the chart in pixel number 32
datePattern date-pattern In case the x are made of dates, the pattern to be use to parse the dates. Have a look to date-fns for a list of the supported format. string 'yyyy-MM-dd'
yAxisDomain y-axis-domain Should the y axis plot the values from 0 to max or be extended (use extent) to cover all values string max
smooth smooth Draw a smooth line or a line with edges boolean true
area area Draw the area or just a line boolean true
ticks ticks Specify the ticks of the axis number ``
grid grid Draw a grid behin the graph boolean false
separator separator The line separator use in your csv file string ';'

Styling

The <deckgo-line-chart/> could be styled using the following CSS4 variables:

CSS4 variable Default Note
--deckgo-chart-axis-color black The color of the axis
--deckgo-chart-text-color The color of the labels
--deckgo-chart-text-display The display property of the labels
--deckgo-chart-fill-color #3880ff The fill color of the area of the main chart
--deckgo-chart-fill-opacity The opacity of the area of the main chart
--deckgo-chart-stroke The stroke of the area of the main chart
--deckgo-chart-stroke-width The stroke width of the area of the main chart
--deckgo-chart-compare-fill-color #0cd1e8 The fill color of the area of the chart to compare
--deckgo-chart-compare-fill-opacity 0.7 The opacity of the area of the chart to compare
--deckgo-chart-compare-stroke The stroke of the area of the chart to compare
--deckgo-chart-compare-stroke-width The stroke width of the area of the chart to compare
--deckgo-chart-grid-stroke #989aa2 The stroke of the grid
--deckgo-chart-grid-stroke-opacity 0.7 The stroke opacity of the grid

Methods

The <deckgo-line-chart/> expose the following method in case you would like to redraw your chart, for example on resize of the window:

draw() => Promise<void>

Examples

You could find other examples of line charts in the src/index.html of the project.

<deckgo-line-chart width="500" height="400" date-pattern="dd.MM.yyyy" src="https://raw.githubusercontent.com/fluster/deckdeckgo-charts/master/showcase/data-line-chart.csv"></deckgo-line-chart>

Bar usage

The <deckgo-bar-chart/> Web Component draw a Bar chart.

CSV

The csv file should contains at lest two columns. The values could be provided as number or percent.

Multiple columns

The first column should contains the labels or groups used for the X axis. The other columns are the values use for the Y axis.

Group A;5;0;10
Group B;10;6;12
Group C;8;14;8
Group D;14;8;16
Group E;18;4;5

Properties

The <deckgo-bar-chart/> expose the following properties:

Property Attribute Mandatory Description Type Default
src src X The path to the source file of the data string
width width X The width of the chart number
height height X The height of the chart number
marginBottom margin-bottom The margin bottom of the chart in pixel number 32
marginLeft margin-left The margin left of the chart in pixel number 32
marginRight margin-right The margin right of the chart in pixel number 32
marginTop margin-top The margin top of the chart in pixel number 32
separator separator The line separator use in your csv file string ';'

Styling

The <deckgo-bar-chart/> could be styled using the following CSS4 variables:

CSS4 variable Default Note
--deckgo-chart-axis-color black The color of the axis

Furthermore, as the Bar chart could draw dynamically multiple bars, it will generate dynamically the following CSS4 variable for each series of data where X is an index between 1 and the number of bars.

CSS4 variable Default Note
--deckgo-chart-text-color The color of the labels
--deckgo-chart-text-display The display property of the labels
--deckgo-chart-fill-color-barX The fill color of the bar chart identified with index X
--deckgo-chart-fill-opacity-baxX The opacity of the bar chart identified with index X
--deckgo-chart-stroke-barX The stroke of the bar chart identified with index X
--deckgo-chart-stroke-width-barX The stroke width of the chart identified with index X

Methods

The <deckgo-bar-chart/> expose the following method in case you would like to redraw your chart, for example on resize of the window:

draw() => Promise<void>

Examples

You could find other examples of bar charts in the src/index.html of the project.

<deckgo-bar-chart width="500" height="400" src="https://raw.githubusercontent.com/fluster/deckdeckgo-charts/master/showcase/data-pie-chart.csv" style="--deckgo-chart-fill-color-bar1: #3880ff;"></deckgo-bar-chart>

License

MIT © David Dal Busco

Install

Link to this version
ImportedReleased 07 February 2019MIT License
Framework Support
Browser Independent
Install with
npm install deckdeckgo-charts"@1.0.0-alpha.5"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.0-alpha.5

Dependencies

  • d3-array#^2.0.3
  • d3-axis#^1.0.12
  • d3-scale#^2.2.2
  • d3-scale-chromatic#^1.3.3
  • d3-selection#^1.4.0
  • d3-shape#^1.3.4
  • date-fns#^2.0.0-alpha.26