SVGChart

• 🚀 Zero dependencies
• 🎨 SVG rendering
• 📈 Multiple datasets
• 📉 Straight or smooth curves
• 💡 Interactive value tooltips
• 🎯 Custom point styling
• 🎭 Shadow DOM isolation
• ✨ Clip-path area fills
• ⚡ Responsive (ResizeObserver)
• 🪶 Lightweight (6.6kb)

Installation

Simply include the script.

<script src="SVGChart.js"></script>

Basic Usage

<div id="chart"></div>

<script>
const chart = Chart(
    document.getElementById("chart"),
    [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May"
    ]
);

chart.add({
    list: [20,35,18,42,28],

    line:{
        color:"#5B8DEF",
        width:3,
        curve:.6
    }
});
</script>

Creating a chart

const chart = Chart(element, labels, options);

Parameters

Name	Type	Description
element	HTMLElement	Target container
labels	Array	X-axis labels
options	Object	Global chart options

Global Options

{
    style:"",
    hide:"",
    range:function(value){}
}

style

Inject custom CSS into the chart Shadow DOM.

style:`
.chartp{
    --pointer:#ff0000;
}
`

hide

Always display the tooltip for a specific point.

Example

hide:"(3)"

range

Customize values shown on the left axis.

range(value){
    return "$"+value;
}

Adding a dataset

chart.add(options)

Example

chart.add({

    list:[10,30,20,50,35],

    line:{
        color:"#00AAFF",
        width:3,
        curve:.6
    }

});

Dataset Options

list

Required

list:[]

Numeric values.

Length must equal label count.

line

Configures the SVG line.

line:{
    color:"#4A8FFF",
    width:3,
    curve:.5,
    style:""
}

color

Stroke color.

width

Line thickness.

curve

Smoothness.

0 = straight

0.3 = soft

0.6 = smooth

1 = very smooth

style

Extra CSS.

Example

style:`
filter:drop-shadow(0 0 8px #4A8FFF);
`

clip

Creates a clipping path for area fills.

clip:true

or

clip:-1

clip_style

Style applied to clipped area.

Example

clip_style:`
background:
    linear-gradient(
        to top,
        rgba(0,120,255,.35),
        transparent
    );
`

value_show

Customize tooltip values.

value_show(value,label){

    return label+": $"+value;

}

Point Styling

Every point can be customized.

pointer

pointer:`
height:80%;
`

pointer_hover

pointer_hover:`
height:90%;
`

value

Tooltip style.

value:`
background:#333;
color:white;
`

value_hover

Tooltip while hovering.

spot

The point indicator.

spot:`
background:red;
padding:7px;
`

spot_hover

Hovered point indicator.

Multiple datasets

chart.add({
    list:[10,20,30,25,40],

    line:{
        color:"#4A8FFF"
    }
});

chart.add({
    list:[15,10,40,35,45],

    line:{
        color:"#FF5C5C"
    }
});

Remove datasets

Remove last dataset

chart.remove();

Remove dataset by index

chart.remove(0);

Refresh

Re-render the chart.

chart.refresh();

Styling

SVGChart exposes CSS variables.

.chartp{

    --pointer:#4A8FFF;

    --line:rgba(0,0,0,.08);

    --bakcground-value:#222;

    --color-value:#fff;

}

licence

fully free to use and change

seezaara youtube
seezaara telegram