Trend charts for Vue.js
Last updated 4 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

:cd: Installation

npm i vue-trend-chart

:rocket: Usage

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



      data: [10, 50, 20, 100, 40, 60, 80],
      smooth: true,
      fill: true
     verticalLines: true,
     horizontalLines: true
     xLabels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
     yLabels: 5

:wrench: Props


Type: Array

Array of objects with properties for each dataset.


Type: Object

Grid properties


Type: Object

Labels properties


Type: Number
Default: min value from datasets


Type: Number
Default: max value from datasets


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.

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


Type: Boolean
Default: false

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

:zap: Events


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.

:chart_with_upwards_trend: Dataset Props

Chart line (curve) properties


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.


Type: String

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


Type: Boolean
Default: false

Allows the peaks to be 'rounded' out.


Type: Boolean
Default: true

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


Type: Boolean
Default: false

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


Type: Boolean
Default: false

Allows to show points. Set to true to enable.

:hash: Grid Props


Type: Boolean
Default: false

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


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.


Type: Boolean
Default: false

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


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.

:abc: Labels Props


Type: Array

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


Type: Number

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


Type: Function

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

:art: Styling

Just use CSS to style your charts.

Here is an example of a tree structure with available class names:

<svg class="vtc">
  <g class="grid">
    <g class="vertical">
      <line class="line"></line>
    <g class="horizontal">
      <line class="line"></line>

  <g class="labels">
    <g class="x-labels">
      <g class="label">
    <g class="y-labels">
      <g class="label">

  <g class="curve">
    <path class="fill"></path>
    <path class="stroke"></path>
    <g class="points">
      <circle class="point"></circle>

  <line class="active-line"></line>

:hammer: Development

npm install
npm run dev

:two_hearts: Contributing

Pull requests are welcome!

:lock: License


Current Tags

  • 0.15.1                                ...           latest (4 months ago)

21 Versions

  • 0.15.1                                ...           4 months ago
  • 0.15.0                                ...           4 months ago
  • 0.14.6                                ...           7 months ago
  • 0.14.4                                ...           a year ago
  • 0.14.3 [deprecated]           ...           a year ago
  • 0.14.2 [deprecated]           ...           a year ago
  • 0.14.1 [deprecated]           ...           a year ago
  • 0.14.0 [deprecated]           ...           a year ago
  • 0.13.0 [deprecated]           ...           a year ago
  • 0.12.0 [deprecated]           ...           a year ago
  • 0.7.5 [deprecated]           ...           a year ago
  • 0.7.1 [deprecated]           ...           a year ago
  • 0.7.0 [deprecated]           ...           a year ago
  • 0.6.0 [deprecated]           ...           a year ago
  • 0.5.0 [deprecated]           ...           a year ago
  • 0.4.0 [deprecated]           ...           a year ago
  • 0.3.0 [deprecated]           ...           a year ago
  • 0.2.1 [deprecated]           ...           a year ago
  • 0.2.0 [deprecated]           ...           a year ago
  • 0.1.1 [deprecated]           ...           a year ago
  • 0.1.0 [deprecated]           ...           a year ago
Maintainers (1)
Today 0
This Week 0
This Month 26
Last Day 1
Last Week 1
Last Month 27
Dependencies (0)
Dev Dependencies (8)

Copyright 2014 - 2016 © |