Peity turns element text like "5,3,9,6,5,9,7" into simple SVG mini graphs. These lightweight charts can be used inline or as small data visualization elements.

Line Chart

You can specify the width of the strokes using strokeWidth inside data-peity attribute
0,-3,-6,-4,-5,-4,-7,-3,-5,-2
0,-3,-6,-4,-5,-4,-7,-3,-5,-2
0,1,7,6,4,2,3,5,3,4
5,3,9,6,5,3,1,7,6,4

Bar Chart

Bar charts can have positive or negative integers. You can change the bar colors via the following data-peity='{ "fill": ["var(--info-200)","var(--info-500)","var(--info-700)","var(--info-900)"] }'
5,3,9,6,5,9,7,3,5,2
4,-3,-6,-4,-5,-4,7,-3,-5,2
0,1,7,6,4,2,3,5,3,4
0,-1,-7,-6,-4,-2,-3,-5,-3,-4

Donut Chart

Donut charts can have any values. You can change the colors via CSS variables: data-peity='{ "fill": ["var(--primary-500)","var(--success-500)","var(--info-500)","var(--warning-500)"] }'
1/3
7,6,3,4
5/10
2,3,4,7,9,10,5,6

Dynamic Colors

Colors, sizes and different settings of the chart can be generated dynamically based on data values. The examples below use the .bar-negative class to show positive/negative values in different colors and .bar-transition class to create a gradient effect across bars.
5,3,2,-1,-3,-2,2,3,5,2
5,3,9,6,5,9,7,3,5,2

Area Chart

Example of line with filling. You can add fill by using inserting data-peity='{ "fill": "#1dc9b7" }'
5,3,2,-1,-3,-2,2,3,5,2
1,4,4,7,5,9,10,4,4,7,5,9,10
5,3,9,6,5,3,1,7,6,4,4,1,5
0,1,7,6,4,2,3,5,3,4,3,1,4,6

Pie Chart

Pie charts can have any values. You can change the colors using CSS variables: data-peity='{ "fill": ["var(--primary-500)","var(--success-500)","var(--info-500)","var(--warning-500)"] }'
1/4
7,6,3,4
5/10
2,3,4,7,9,10,5,6

Updating Chart

This chart is automatically updated every half second using vanilla JavaScript. A new random value is generated, added to the chart data, and the oldest value is removed to create a live data visualization effect.
5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2

Chart Sizes

Since the chart is just a generated SVG file, you can potentially generate the chart to any sizes using the values innerRadius and radius for pie and donut charts, and width and height for other charts
1/7 2/7 3/7 4/7 5/7 6/7 7/7