Vue Apexcharts Trendline

vue-apexcharts component for adding a trend line to your charts. This component uses linear regression to calculate the trend line.

Installation

Installing via npm

1npm install vue-apexcharts-trendline

Properties

• type:
  • The chart type used for the main series. See docs for more information.
  • default: 'area'
• options:
  • The options to be used for the chart. See docs for more information.
  • default: (uses the ApexCharts defaults)
• series:
  • The series to be used. docs for more information.
  • *required
  • format: [{name: ..., type: ..., data: ...}, ...], The type property is important for stacked charts.
• trend-options:
  • Object containing various options used be the component.
  • properties:
    • text: The text string to append the the series name for the trend line series.
    • indices: The indices to be used for trend lines, if you don't want to use all the series.
    • series: An option to set a different series for creating the trend lines, if different from main series.
    • show: Determines if the trend lines should be shown or not.
    • tooltips: Determines whether or not to display tooltips of trend lines.
    • dataLabels: Determines whether or not to display dataLabels of trend lines.
    • combined: Determines whether or not to combine the series for the trend line. If not set and options.chart.stacked is true, then it will combine.
  • defaults:
    • text: 'Trend Line'
    • indices: undefined
    • series: undefined
    • show: true
    • tooltips: false
    • dataLabels: false
    • combined: undefined

Example

This is a basic example show how to us the component in a single file vue component.

1<template>
2   <div id="trend-line">
3       <vue-apexcharts-trendline :type="type" :options="options" :series="series" :trend-options="trend_options"/>
4   </div>
5</template>
6
7<script>
8   import VueApexchartsTrendline from "vue-apexcharts-trendline";
9
10   export default {
11           name: 'ExampleChart',
12           components: {
13               VueApexchartsTrendline,
14           },
15           data() {
16               return {
17                   series: [{
18                       name: 'series 1',
19                       type: 'area',
20                       data: [
21                           {x: 0, y: 4},
22                           {x: 1, y: 2},
23                           {x: 2, y: 5},
24                           {x: 3, y: 6},
25                           {x: 4, y: 8},
26                           {x: 5, y: 2},
27                           {x: 6, y: 12},
28                           {x: 7, y: 23},
29                           {x: 8, y: 17},
30                           {x: 9, y: 15},
31                       ],
32                   }, {
33                       name: 'series 2',
34                       type: 'area',
35                       data: [
36                           {x: 0, y: 2},
37                           {x: 1, y: 5},
38                           {x: 2, y: 10},
39                           {x: 3, y: 16},
40                           {x: 4, y: 6},
41                           {x: 5, y: 8},
42                           {x: 6, y: 6},
43                           {x: 7, y: 4},
44                           {x: 8, y: 13},
45                           {x: 9, y: 11},
46                       ],
47                   }],
48                   options: {
49                       title: {
50                           text: 'Example',
51                           align: 'center',
52                       },
53                       chart: {
54                           stacked: true,
55                       },
56                   },
57                   type: 'line',
58                   trend_options: {
59                       indices: [0],
60                       combined: false,
61                   },
62               };
63           },
64       };
65</script>
66

Notes

• When using stacked charts the component recalculates the "yaxis.max" value as the trend lines increase the value.
• When using stacked charts with "{trend-options}.combined = false", the trend lines are also stacked.
• The component also rounds all y axis labels with "Math.round()"