Web components to generate simple, light and responsive charts representing trends.
It is often useful to display some simple charts to represent a data visualization trend without the need of a big chart library, TrendChart Elements is made for that. The aim was to be as plug-and-play as possible, like native HTML tags, so all the configuration is made with CSS variables and HTML attributes. It's fully responsive with built-in basic tooltip.
Tested on modern browsers : Chrome >= 73
, Firefox >= 63
, Edge >= 79
, Safari >= 12
No dependency except Lit to create web components.
Install the package with NPM :
npm install @weblogin/trendchart-elements
Import into your project code :
// All the charts
import '@weblogin/trendchart-elements';
// Only some charts
import { TcLine } from "@weblogin/trendchart-elements";
Check out the demo page for various charts, stylings and use cases.
<tc-line values="[12,10,12,11,7,6,8,10,12]"></tc-line>
<tc-column values="[11,7,6,8,10,12,8,10,12]"></tc-column>
<tc-bar values="[11,7,6,8,10,12,8,10,12]"></tc-bar>
<tc-pie values="[35,68,22,16]"></tc-pie>
Charts configuration is made with CSS variables and HTML attributes.
Use CSS to change the width
and height
of the chart, because they are responsive you can use percentages. In some cases you'll need to have a radius around the chart if its container has one, for that just add a border-radius
CSS rule to the chart.
- Common
values
- Required array of numbers for the values. Examplevalues="[12,10,11]"
- Default[]
labels
- Optional array of strings for the labels corresponding to the values, it needs to be the same length asvalues
array. Only usefull when chart notstatic
. Examplelabels='["Foo","Bar","Baz"]'
- Default[]
min
- Optional number or null for the minimum value, in most cases you'll need to set it to0
. Whennull
the chart uses the smallest value - Defaultnull
max
- Optional number or null for the maximum value, usefull if you need to have multiple charts with the same scale. Whennull
the chart uses the highest value - Defaultnull
static
- Optional attribute to disable tooltip and other hover styling, it doesn't need a value, just add the attributetooltip
- Optional string to format the tooltip text. Two placeholders are available,@V
being the current value and@L
the current label if present - Default@L @V
- Line chart
shape-size
- Optional number for the line size - Default2
- Column / Bar chart
shape-radius
- Optional number for the columns / bars radius - Default1
shape-gap
- Optional number for the gap between columns / bars - Default1
- Pie chart
shape-size
- Optional number or null for the slice size,null
gives a pie and anumber
create a donut - Defaultnull
shape-gap
- Optional number for the gap between slices - Default1
- Common
--shape-color
- Default#597BFC
--shape-opacity
- Default1
--area-color
- Defaultvar(--shape-color)
--area-opacity
- Default0
--tooltip-font-color
- Defaultwhite
--tooltip-font-size
- Default0.875em
--tooltip-font-weight
- Defaultbold
--tooltip-radius
- Default3px
--tooltip-padding
- Default3px 4px
--tooltip-background
- Defaultblack
--tooltip-shadow
- Defaultnone
- Line chart
--point-color
- Defaultvar(--shape-color)
--point-opacity
- Default1
--point-shadow
- Defaultnone
- Column / Bar chart
--shape-focused-opacity
- Column / Bar opacity on hover - Default0.5
- Pie chart
--shape-focused-opacity
- Slice opacity on hover - Default0.5
TrendChart Elements is licensed under the MIT license.