Skip to content

vue-apexcharts component for adding a trend line to your charts

License

Notifications You must be signed in to change notification settings

JarrydLisher/vue-apxcharts-trendline

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>

Screenshot

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

About

vue-apexcharts component for adding a trend line to your charts

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published