Reusable Charting Library – vue-d3-charts

Description:

vue-d3-charts is a reusable, configurable, animated charting library for Vue.js applications, based on the d3.js library.

Components Included:

  • D3BarChart: Bar Chart
  • D3LineChart: Line Chart
  • D3PieChart: Pie Chart
  • D3SlopeChart: Slope Chart
  • D3Sunburst: Sunburst Chart
  • D3WordsCloud: Word (tag) Cloud

Basic usage:

1. Install and import a component.

import {D3BarChart} from 'vue-d3-charts';

2. Create a component in your template:

<D3BarChart :config="chart_config" :datum="chart_data"></D3BarChart>

3. Prepare your data for the chart.

chart_data = [{
  name: "Lorem",
  total: 30
},{
  name: "Ipsum",
  total: 21
},{
  name: "Dolor",
  total: 20
}]

4. Config the chart as follows:

chart_config = {
  key: false,
  value: false,
  axis: {
    yTitle: false,
    xTitle: false,
    yFormat: ".0f",
    xFormat: ".0f",
    yTicks: 10,
    xTicks: 10,
  },
  color: {
    key: false,
    keys: false,
    scheme: false,
    current: "#1f77b4",
    default: "#AAA",
    axis: "#000",
  },
  currentKey: false,
  labelRotation: 0,
  margin: {
    top: 20,
    right: 20,
    bottom: 20,
    left: 20,
  },
  tooltip: {label: false},
  transition: {
    duration: 350,
    ease: "easeLinear",
  },
}

Previews:

vue-d3-charts Word Cloud

Word Cloud

vue-d3-charts Sunburst Chart

Sunburst Chart

vue-d3-charts Slope Chart

Slope Chart

vue-d3-charts Pie Chart

Pie Chart

vue-d3-charts Line Chart

Line Chart

vue-d3-charts Bar Chart

Bar Chart

Download Details:

Author: Saigesp

Live Demo: https://saigesp.github.io/vue-d3-charts/

Download Link: https://github.com/Saigesp/vue-d3-charts/archive/master.zip

Official Website: https://github.com/Saigesp/vue-d3-charts

Install & Download:

# NPM
$ npm install vue-d3-charts --save

You Might Be Interested In:

Add Comment