Documentation

Getting Started

VibeCharts is a modern, lightweight JavaScript library for creating beautiful, interactive charts. With zero dependencies and support for 17+ chart types, it's the perfect solution for any data visualization project.

Lightweight

Zero dependencies. Pure JavaScript with optimized performance.

Customizable

Individual element colors, gradients, themes, and unlimited styling options.

Responsive

Automatically adapts to any screen size with touch support.

Installation

Method 1: Direct Download

Download the files and include them in your HTML:

<!-- Include CSS -->
<link rel="stylesheet" href="assets/css/VibeCharts.css">

<!-- Include JavaScript -->
<script src="assets/js/VibeCharts.js"></script>

Method 2: NPM

npm install vibecharts

Method 3: CDN

<link rel="stylesheet" href="https://cdn.vibecharts.com/v1.1.0/VibeCharts.css">
<script src="https://cdn.vibecharts.com/v1.1.0/VibeCharts.js"></script>

What's New in v1.1.0

Major Update! Version 1.1.0 brings powerful new features for enhanced customization and better user experience.

🎨 Individual Color Control

Now you can assign different colors to each bar, line point, or chart element:

const chart = new VibeCharts('myChart', {
  type: 'bar',
  barColorMode: 'individual',  // Each bar gets a different color
  colors: ['#667eea', '#764ba2', '#f093fb', '#4facfe']
});

🌈 Shade Variations

Automatic color variations from a base color:

const chart = new VibeCharts('myChart', {
  type: 'bar',
  barColorMode: 'shade',  // Creates lighter/darker shades
  colors: ['#667eea']     // Base color
});

📊 New Chart Types

Donut Chart - Pie chart with center hole and total display
Area Chart - Filled line chart with gradient
Waterfall Chart - Show cumulative effect of values

⏳ Loading Placeholders

Theme-aware shimmer animations while charts load:

const chart = new VibeCharts('myChart', {
  showPlaceholder: true  // Shows animated placeholder
});

// Load data asynchronously
await chart.loadData('https://api.example.com/data');

Chart Types

VibeCharts supports 17+ chart types for all your data visualization needs:

Bar Chart

type: 'bar'

Vertical bars for comparing categories

Horizontal Bar

type: 'horizontalBar'

Horizontal bars for rankings

Line Chart

type: 'line'

Trends and changes over time

Area Chart ⭐

type: 'area'

Filled line chart with gradient

Pie Chart

type: 'pie'

Proportions and percentages

Donut Chart ⭐

type: 'donut'

Pie with center total display

Radar Chart

type: 'radar'

Multi-dimensional comparison

Gauge Chart

type: 'gauge'

Single KPI display

Heatmap

type: 'heatmap'

Matrix data with color intensity

Waterfall ⭐

type: 'waterfall'

Cumulative value changes

Try All Charts in Demo

Color Modes

New in v1.1! Advanced color control for individual elements.

Bar Color Modes

Control how colors are applied to bar charts:

// Option 1: Series Mode (all bars same color)
barColorMode: 'series'

// Option 2: Individual Mode (each bar different color)
barColorMode: 'individual'

// Option 3: Shade Mode (auto-generate shades)
barColorMode: 'shade'

Example: Individual Bar Colors

Line Color Modes

Control how colors are applied to line charts:

// Option 1: Same Color (traditional line chart)
lineColorMode: 'same'

// Option 2: Individual (each point different color)
lineColorMode: 'individual'

// Option 3: Gradient (smooth color transition)
lineColorMode: 'gradient'

Example: Gradient Line

Configuration Options

Comprehensive configuration options for complete customization:

Option	Type	Default	Description
`type`	String	'bar'	Chart type
`data`	Array	[]	Chart data
`barColorMode` ⭐	String	'series'	'series', 'individual', 'shade'
`lineColorMode` ⭐	String	'same'	'same', 'individual', 'gradient'
`colors`	Array	['#667eea', ...]	Color palette
`theme`	String	'dark'	'lite', 'dark', 'gradient', 'glass'
`style`	String	'default'	'sharp', 'default', 'soft', 'rounded'
`gradient`	Boolean	false	Enable gradient fills
`showPlaceholder` ⭐	Boolean	true	Show loading placeholder
`responsive`	Boolean	true	Auto-resize on container change
`showGrid`	Boolean	true	Display grid lines
`showLegend`	Boolean	true	Display legend
`title`	String	''	Chart title
`height`	Number	400	Chart height in pixels

Themes & Styles

Themes

Dark Theme

theme: 'dark'

Modern dark background for contemporary apps

Light Theme

theme: 'lite'

Clean white background for bright interfaces

Gradient Theme

theme: 'gradient'

Purple gradient for stunning visuals

Glass Theme

theme: 'glass'

Glassmorphism with blur effect

Custom Theme

new VibeCharts('myChart', {
    type: 'bar',
    customTheme: {
        backgroundColor: '#0f0f1a',
        textColor: '#e4e4e7',
        gridColor: '#2a2a3e'
    }
});

Border Styles

style: 'sharp'     // 0px radius
style: 'default'   // 4px radius  
style: 'soft'      // 18px radius
style: 'rounded'   // 51px radius

Data Loading

Method 1: Direct Object

const chart = new VibeCharts('myChart', {
  type: 'bar',
  data: [
    { label: 'Product A', value: 150 },
    { label: 'Product B', value: 230 },
    { label: 'Product C', value: 180 }
  ]
});

Method 2: Load from API

const chart = new VibeCharts('myChart', {
  type: 'line',
  showPlaceholder: true  // Shows loading animation
});

// Load data asynchronously
await chart.loadData('https://api.example.com/data.json');

Method 3: Dynamic Updates

// Update chart with new data
chart.updateOptions({
  data: newDataArray,
  colors: ['#ff0000', '#00ff00']
});

API Reference

Constructor

new VibeCharts(containerId, options)

Parameters:

containerId (String) - ID of DOM element
options (Object) - Configuration object

Methods

loadData(source)

Load data from object or URL:

// From object
chart.loadData([{ label: 'A', value: 10 }]);

// From URL
await chart.loadData('https://api.example.com/data.json');

updateOptions(newOptions)

Update chart configuration:

chart.updateOptions({
  theme: 'dark',
  colors: ['#ff0000'],
  data: newData
});

render()

Manually re-render chart:

chart.render();

destroy()

Clean up and remove chart:

chart.destroy();

Examples

Example 1: Individual Bar Colors

const chart = new VibeCharts('myChart', {
  type: 'bar',
  data: [
    { label: 'Q1', value: 45000 },
    { label: 'Q2', value: 62000 },
    { label: 'Q3', value: 58000 },
    { label: 'Q4', value: 73000 }
  ],
  theme: 'dark',
  style: 'soft',
  barColorMode: 'individual',
  colors: ['#667eea', '#764ba2', '#f093fb', '#4facfe']
});

Example 2: Gradient Line Chart

const chart = new VibeCharts('lineChart', {
  type: 'line',
  data: [
    { label: 'Week 1', value: 30 },
    { label: 'Week 2', value: 45 },
    { label: 'Week 3', value: 55 },
    { label: 'Week 4', value: 70 }
  ],
  lineColorMode: 'gradient',
  colors: ['#4facfe', '#00f2fe'],
  theme: 'dark'
});

Example 3: Donut Chart with Total

const chart = new VibeCharts('donutChart', {
  type: 'donut',
  data: [
    { label: 'Desktop', value: 45 },
    { label: 'Mobile', value: 35 },
    { label: 'Tablet', value: 20 }
  ],
  theme: 'gradient',
  style: 'soft'
});

Best Practices

1. Choose the Right Chart Type

Bar Charts: Comparing discrete categories
Line Charts: Showing trends over time
Pie/Donut: Parts of a whole (max 5-7 slices)
Radar: Multi-dimensional comparison
Heatmap: Matrix data with patterns

2. Color Usage

// Good: Meaningful palette
colors: ['#2ecc71', '#e74c3c', '#3498db']

// Avoid: Too many colors
colors: ['#abc', '#def', '#123', ...] // 20+ colors

3. Performance Tips

For large datasets (1000+ points), aggregate data
Use debouncing for frequent updates
Reuse chart instances instead of recreating
Enable showPlaceholder for async data

Quick Navigation