vue-trend-chart
Trend charts for Vue.js
Last updated 5 months ago by dmtrbrl .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-trend-chart 
SYNC missed versions from official npm registry.
Vue Trend

Live Demo

Installation

npm i vue-trend-chart

Usage

import Vue from "vue";
import TrendChart from "vue-trend-chart";

Vue.use(TrendChart);

vue template

<TrendChart
  :datasets="[
    {
      data: [10, 50, 20, 100, 40, 60],
      smooth: true,
      fill: true
    }
  ]"
  :min="0">
</TrendChart>

Props

datasets

Required
Type: Array

Array of objects with properties for each dataset.

grid

Type: Object

Grid properties

labels

Type: Object

Labels properties

min

Type: Number
Default: min value from datasets

max

Type: Number
Default: max value from datasets

padding

Type: String
Default: "5"

If you set a large stroke-width on your lines, you may notice that it gets "cropped" towards the edges. It's similar to "padding" CSS property but without specifying units.

Examples:
"5" apply to all four sides
"5 10" vertical | horizontal
"5 15 10" top | horizontal | bottom
"5 10 15 20" top | right | bottom | left

interactive

Type: Boolean
Default: false

Allows to set onmousemove interaction. Set to true to enable.

v-on:mouseMove

Or @mouseMove
Type: Function

Callback function for onmouseover interaction.
Receives an object {index: Number, data: Array} parameter based on current active line.
This function has no effect if interactive isn't set to true.

Dataset Props

Chart line (curve) properties

data

Type: Number|Object

Example: [70, 100, 400, 180, 100] or [{ value: 70 }, { value: 100 }, { value: 400 }, { value: 180 }, { value: 100 }]
For object type you can also add other properties to use them in interactive mode.

className

Type: String

Allows to append custom class to chart line for future styling.

smooth

Type: Boolean
Default: false

Allows the peaks to be 'rounded' out.

stroke

Type: Boolean
Default: true

If false, the line is not drawn for this dataset.

fill

Type: Boolean
Default: false

Allows to fill the area under the line. Set to true to enable.

showPoints

Type: Boolean
Default: false

Allows to show points. Set to true to enable.

Grid Props

verticalLines

Type: Boolean
Default: false

Allows to show vertical gridlines. Set to true to enable.

verticalLinesNumber

Type: Number
Default: number of xLabels

Allows to set custom number of vertical gridlines.
This prop has no effect if verticalLines isn't set to true.

horizontalLines

Type: Boolean
Default: false

Allows to show horizontal gridlines. Set to true to enable.

horizontalLinesNumber

Type: Number
Default: number of yLabels

Allows to set custom number of horizontal gridlines.
This prop has no effect if horizontalLines isn't set to true.

Labels Props

xLabels

Type: Array

X axis labels.
Example: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

yLabels

Type: Number

Number of Y axis labels. Labels text is based on data values.

yLabelsTextFormatter

Type: Function

Allows to format Y axis labels text.
Example: val => "$" + Math.round(val * 100) / 100
This function has no effect if yLabels prop has no value.

Styling

You need to use CSS to style chart.

Development

npm install
npm run dev

Contributing

Pull requests are welcome!

License

MIT

Current Tags

  • 0.14.4                                ...           latest (5 months ago)

18 Versions

  • 0.14.4                                ...           5 months ago
  • 0.14.3 [deprecated]           ...           5 months ago
  • 0.14.2 [deprecated]           ...           5 months ago
  • 0.14.1 [deprecated]           ...           5 months ago
  • 0.14.0 [deprecated]           ...           5 months ago
  • 0.13.0 [deprecated]           ...           5 months ago
  • 0.12.0 [deprecated]           ...           5 months ago
  • 0.7.5 [deprecated]           ...           6 months ago
  • 0.7.1 [deprecated]           ...           6 months ago
  • 0.7.0 [deprecated]           ...           6 months ago
  • 0.6.0 [deprecated]           ...           6 months ago
  • 0.5.0 [deprecated]           ...           6 months ago
  • 0.4.0 [deprecated]           ...           6 months ago
  • 0.3.0 [deprecated]           ...           6 months ago
  • 0.2.1 [deprecated]           ...           6 months ago
  • 0.2.0 [deprecated]           ...           6 months ago
  • 0.1.1 [deprecated]           ...           6 months ago
  • 0.1.0 [deprecated]           ...           6 months ago
Maintainers (2)
Downloads
Today 0
This Week 18
This Month 22
Last Day 0
Last Week 1
Last Month 38
Dependencies (0)
None
Dev Dependencies (8)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |