Sunny/vue-trend-chart

Installation

npm i vue-trend-chart

Usage

import TrendChart from "vue-trend-chart";

app.use(TrendChart);

Example:

<TrendChart
  :datasets="[
    {
      data: [10, 50, 20, 100, 40, 60, 80],
      smooth: true,
      fill: true
    }
  ]"
  :grid="{
     verticalLines: true,
     horizontalLines: true
  }"
  :labels="{
     xLabels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
     yLabels: 5
  }"
  :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.

`interactive`

Type: Boolean
Default: false

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

Events

`mouse-move`

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

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>
    <g class="horizontal">
      <line class="line"></line>
      ...
    </g>
  </g>

  <g class="labels">
    <g class="x-labels">
      <g class="label">
        <text></text>
      </g>
      ...
    </g>
    <g class="y-labels">
      <g class="label">
        <text></text>
      </g>
      ...
    </g>
  </g>

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

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

Development

npm install
npm run dev

Contributing

Pull requests are welcome!

License

MIT