vikcraft-charts

A powerful canvas-based 2D charting library + optional Three.js 3D charts — zero required dependencies for 2D.

Features

2D Charts (canvas, no dependencies)

• Bar, Horizontal Bar, Line, Area, Pie, Doughnut, Radar, Scatter, Mixed, Combo (bar + line)
• 6 built-in themes (dark, light, blue, ocean, carbon, green)
• Smart tick algorithm, gradient fills, rounded bars
• Staggered animation, crosshair, smart tooltip positioning
• Reference lines, glow lines, color palettes
• setTheme() / update() / destroy() API

3D Charts (requires three peer dependency)

• 3D Bar, 3D Scatter, 3D Line / Surface charts
• Full Three.js scene with OrbitControls, axes, CSS2D labels
• Responsive resize handling

Install

npm install vikcraft-charts
# For 3D charts:
npm install three

Quick Start — 2D

Via <script> tag

<link rel="stylesheet" href="node_modules/vikcraft-charts/vikcraft-chart.css">
<script src="node_modules/vikcraft-charts/vikcraft-chart.js"></script>

<canvas id="myChart" width="800" height="400"></canvas>

<script>
  const chart = new VikCraft('#myChart', {
    type: 'bar',
    theme: 'dark',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      datasets: [{
        label: 'Revenue',
        data:  [12000, 19000, 8000, 24000, 17000],
        color: '#3b82f6',
      }]
    },
    options: {
      title: 'Monthly Revenue',
      yAxis: { label: 'USD' },
    }
  });
</script>

Via bundler

import VikCraft from 'vikcraft-charts';
import 'vikcraft-charts/vikcraft-chart.css';

const chart = new VikCraft('#myChart', { type: 'bar', data: { ... } });

Quick Start — 3D

// 3D charts are a separate module import
import VikCraft3D from 'vikcraft-charts/vikcraft-chart-3d.js';
// or via script tag: <script src="node_modules/vikcraft-charts/vikcraft-chart-3d.js">

const chart3d = new VikCraft3D('#myContainer', {
  type: '3d-bar',
  data: { ... }
});

Chart Types

| Type | Class | Description | |------|-------|-------------| | bar | VikCraft | Vertical bar chart | | bar-h | VikCraft | Horizontal bar chart | | line | VikCraft | Line chart | | area | VikCraft | Filled area chart | | pie | VikCraft | Pie chart | | doughnut | VikCraft | Doughnut / ring chart | | radar | VikCraft | Radar / spider chart | | scatter | VikCraft | Scatter / bubble chart | | mixed | VikCraft | Combined bar + line | | 3d-bar | VikCraft3D | 3D bar chart (Three.js) | | 3d-scatter | VikCraft3D | 3D scatter plot |

API

chart.update(newData)         // Refresh chart with new data
chart.setTheme('ocean')       // Switch theme
chart.resize()                // Trigger manual resize
chart.destroy()               // Remove and clean up

CDN

<!-- 2D only -->
<link  rel="stylesheet" href="https://unpkg.com/vikcraft-charts/vikcraft-chart.css">
<script src="https://unpkg.com/vikcraft-charts/vikcraft-chart.js"></script>

<!-- 3D (also requires Three.js) -->
<script type="module">
  import VikCraft3D from 'https://unpkg.com/vikcraft-charts/vikcraft-chart-3d.js';
</script>

License

MIT © VikCraft Pro