# Peity Charts

###### Lightweight inline SVG mini charts

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

#### Hi Sunny,

how can I help you today?
Analyze my data

Create a new report

Summarize my Calendar

App Builder
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
Header position fixed
Navigation full height
Navigation position fixed
Navigation collapsed
Navigation Minified
Dark Navigation
Colorblind Mode
High Contrast Mode