ChartForge

ChartForge

Charts
Theme
Log in Register

ChartForge Tutorial

Get started with ChartForge.js in minutes

5 min read Beginner Friendly

Table of Contents

1. Introduction 2. Installation 3. Initialization 4. Creating Charts 5. Next Steps

1. Introduction

ChartForge.js is a lightweight JavaScript library for creating interactive, responsive charts. It supports various chart types like Pie, Column, and Area, and works seamlessly in modern browsers.

This tutorial covers the essentials: downloading ChartForge, initializing the library, and creating basic charts. For customization, styling, and advanced features, visit our Customization Guide.

2. Installation

Download ChartForge

Download the ChartForge.js library (200KB) from our site and include it in your project.

Include in HTML

<script src="path/to/chartforge.js"></script>

Basic HTML Setup

Create a container for your chart and include the script. 

<!DOCTYPE html>
<html>
<head>
    <title>ChartForge App</title>
</head>
<body>
    <div id="my-chart" style="width: 100%; height: 400px;"></div>
    <script src="chartforge.js"></script>
</body>
</html>

Browser Support

ChartForge works in Chrome 80+, Firefox 75+, Safari 13+, Edge 80+, and mobile browsers (iOS 13+, Android 8+).

3. Initialization

Initialize a ChartForge instance to manage your charts. You only need one instance for multiple charts.

JavaScript Code

const forge = new ChartForge({
    darkMode: localStorage.getItem('theme') === 'dark'
});

4. Creating Charts

Create charts by specifying a container ID, chart type, and data. Here are examples for Pie, Column, and Area charts.

Pie Chart

JavaScript Code

const chart = forge.createChart('my-chart', 'pie', {
                    showLabels: true,
                    showLegend: true,
                    showTooltip: true
                });
                chart.setData([
                    { name: 'Chrome', value: 65 },
                    { name: 'Safari', value: 18 },
                    { name: 'Firefox', value: 12 },
                    { name: 'Edge', value: 5 }
                ]);

Live Demo

Column Chart

JavaScript Code

const chart = forge.createChart('my-chart', 'column', {
                    showGrid: true,
                    showTooltip: true
                });
                chart.setData([
                    { name: 'Q1', value: 25000 },
                    { name: 'Q2', value: 32000 },
                    { name: 'Q3', value: 28000 },
                    { name: 'Q4', value: 35000 }
                ]);

Live Demo

Area Chart

JavaScript Code

const chart = forge.createChart('my-chart', 'area', {
                    showGrid: true,
                    showTooltip: true,
                    showPoints: true
                });
                chart.setData({
                    name: 'Traffic',
                    data: [
                        { name: 'Jan', value: 15000 },
                        { name: 'Feb', value: 30000 },
                        { name: 'Mar', value: 20000 },
                        { name: 'Apr', value: 40000 },
                        { name: 'May', value: 25000 },
                        { name: 'Jun', value: 35000 }
                    ]
                });

Live Demo

5. Next Steps

You’ve learned the basics of ChartForge.js! To explore styling, animations, and advanced features, check out our resources:

Customization Guide Chart Examples

Ready to Create Charts?

Download ChartForge and start building today

Download ChartForge.js 200KB View Examples