Reusable Charting Library - vue-d3-charts

Install & Download:

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

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",
  },
}