https://github.com/truongdd03/vue-3d-charts

A 3D chart library for Vue 3, built with TresJS for modern and interactive data visualization.
https://github.com/truongdd03/vue-3d-charts

3d chart charting-library charts threejs visualization vue vue-library vue-ui-components vue3

Last synced: 13 days ago
JSON representation

A 3D chart library for Vue 3, built with TresJS for modern and interactive data visualization.

• Host: GitHub
• URL: https://github.com/truongdd03/vue-3d-charts
• Owner: truongdd03
• License: mit
• Created: 2024-12-08T05:47:11.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-12-14T00:33:57.000Z (2 months ago)
• Last Synced: 2025-01-12T04:14:26.506Z (about 1 month ago)
• Topics: 3d, chart, charting-library, charts, threejs, visualization, vue, vue-library, vue-ui-components, vue3
• Language: Vue
• Homepage: https://www.npmjs.com/package/vue-3d-charts
• Size: 209 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-3d-charts

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)



![](https://github.com/truongdd03/vue-3d-charts/workflows/Build/badge.svg)

**WARNING: Work In Progress!!!**

3D chart library written in Vue 3 and TresJS.

Supported Charts:

- [Bar Chart](#bar-chart)

- Line Chart (Todo)

- Heatmap (Todo)

- Pie Chart (Todo)

## Installation

```bash

npm i vue-3d-charts

```

## Getting Started

### Bar Chart

```vue

  

import { BarChart, type ChartConfig } from 'vue-3d-charts';

const data = [

  [5, 2, 4, 6, 2],

  [9, 2, 3, 1, 3],

  [5, 5, 3, 1, 1],

  [4, 2, 5, 1, 7],

];

const config: ChartConfig = {

  labels: {

    x: 'Season',

    y: 'Mean Temperature',

    z: 'Time Period',

    color: 'orange',

    xData: ['Spring', 'Summer', 'Fall', 'Winter'],

    hideXTicks: true,

  },

  autoRotate: true,

};

```

![bar-chart](https://github.com/user-attachments/assets/0dfcb6ed-18b4-4df2-a669-67a92f2ab067)

## For Developers

```sh

npm install

```

### Compile and Hot-Reload for Development

```sh

npm run dev

```

### Type-Check, Compile and Minify for Production

```sh

npm run build

```

### Lint with [ESLint](https://eslint.org/)

```sh

npm run lint

```