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

npm 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.

<template>
   <div id="trend-line">
       <vue-apexcharts-trendline :type="type" :options="options" :series="series" :trend-options="trend_options"/>
   </div>
</template>

<script>
   import VueApexchartsTrendline from "vue-apexcharts-trendline";

   export default {
           name: 'ExampleChart',
           components: {
               VueApexchartsTrendline,
           },
           data() {
               return {
                   series: [{
                       name: 'series 1',
                       type: 'area',
                       data: [
                           {x: 0, y: 4},
                           {x: 1, y: 2},
                           {x: 2, y: 5},
                           {x: 3, y: 6},
                           {x: 4, y: 8},
                           {x: 5, y: 2},
                           {x: 6, y: 12},
                           {x: 7, y: 23},
                           {x: 8, y: 17},
                           {x: 9, y: 15},
                       ],
                   }, {
                       name: 'series 2',
                       type: 'area',
                       data: [
                           {x: 0, y: 2},
                           {x: 1, y: 5},
                           {x: 2, y: 10},
                           {x: 3, y: 16},
                           {x: 4, y: 6},
                           {x: 5, y: 8},
                           {x: 6, y: 6},
                           {x: 7, y: 4},
                           {x: 8, y: 13},
                           {x: 9, y: 11},
                       ],
                   }],
                   options: {
                       title: {
                           text: 'Example',
                           align: 'center',
                       },
                       chart: {
                           stacked: true,
                       },
                   },
                   type: 'line',
                   trend_options: {
                       indices: [0],
                       combined: false,
                   },
               };
           },
       };
</script>

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()"