Installation¶

The Handwritten Graph Library can be installed in several ways depending on your project setup and preferences.

Package Managers¶

npm¶

npm install handwritten-graph

yarn¶

yarn add handwritten-graph

pnpm¶

pnpm add handwritten-graph

CDN¶

For quick prototyping or when you don’t want to set up a build process:

<!-- Latest version -->
<script src="https://unpkg.com/handwritten-graph@latest/dist/handwritten-graph.js"></script>

<!-- Specific version (recommended for production) -->
<script src="https://unpkg.com/handwritten-graph@1.0.5/dist/handwritten-graph.js"></script>

<!-- With D3.js dependency -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/handwritten-graph@1.0.5/dist/handwritten-graph.js"></script>

Requirements¶

Dependencies¶

The library has the following peer dependencies:

D3.js v7.0.0+ - Used for data visualization and DOM manipulation
Modern browser - Supports ES2020+ features

Note

D3.js is listed as a peer dependency, so you’ll need to install it separately if it’s not already in your project.

System Requirements¶

Node.js: Version 16.0.0 or higher (for development)

Browsers: - Chrome/Edge 90+ - Firefox 88+ - Safari 14+ - Modern mobile browsers

TypeScript Support¶

The library includes full TypeScript definitions out of the box. No additional type packages are needed.

import { LineChart, LineChartData, LineChartConfig } from 'handwritten-graph';

Verification¶

After installation, you can verify everything is working correctly:

// test.js
import { LineChart } from 'handwritten-graph';

console.log('Handwritten Graph Library loaded successfully!');
console.log(LineChart);

<!DOCTYPE html>
<html>
<head>
    <title>Test Installation</title>
</head>
<body>
    <div id="test-chart"></div>

    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://unpkg.com/handwritten-graph@latest/dist/handwritten-graph.js"></script>
    <script>
        console.log('HandwrittenGraph:', typeof HandwrittenGraph);
        console.log('Available charts:', Object.keys(HandwrittenGraph));
    </script>
</body>
</html>

Troubleshooting¶

Common Installation Issues¶

Module not found errors:

# Clear npm cache
npm cache clean --force

# Delete node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

TypeScript errors:

Make sure your tsconfig.json includes the appropriate settings:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

D3.js version conflicts:

Ensure you’re using D3.js v7.0.0 or later:

npm list d3
# If outdated, update:
npm update d3

Webpack Configuration¶

If you’re using Webpack, you might need to configure externals for D3:

// webpack.config.js
module.exports = {
  externals: {
    d3: 'd3'
  }
};

Next Steps¶

Once installed, check out the Quick Start Guide guide to create your first chart!