Vuejs-V chart plugin v1.0.0: v-chart-plugin - A customizable component for adding D3 charts that binds to your components data.

icon
Latest Release: v1.0.0

Initial public release

Source code(tar.gz)
Source code(zip)



A plugin for adding charts to Vue

version version

Table of Contents

Screenshot

Purpose

This plugin is designed to allow Vue.js developers to incorporate fully reactive and customizable charts into their applications. The plugin is built off of the D3.js JavaScript library for manipulating documents based on data. By binding data from your components, you can create complex charts and graphs that respond to changes in your application. Vue.js lifecycle events will trigger the charts to update and maintain two-way binding between your charts and your data. By adding in a state management (such as Vuex) you can additionally persist state across an entire application.

V Chart Plugin is built using Vue.js' component architecture. This will allow the chart to be a first class citizen of your Vue.js application. Combining multiple charts allows you to create complex dashboards and enable deeper insights into your data. All aspects of the charts can be configured to allow for full customization of your graphs along with the ability to style the SVG elements using the classes and IDs generated for each individual canvas element.

By adding additional charts into the import folder and importing them into the v-chart-plugin.js you can include any custom charts to use with Vue.js. Using the JavaScript API you can hook into the specific methods in the API and create a reusable component that can persist across your application.

Demo Page

Usage

These instructions are assuming you are using Vue CLI to create your template. Include the plugin in your main.js:

import Chart from 'v-chart-plugin'

Vue.use(Chart);

Within your component you will need to include an object with: title, selector, width, height, and datapoints to pass to the component. Data can be passed as an array or as an array of objects:

export default {
  name: 'example',
  data () {
    return {
      chartData: {
        chartType: 'barChart',
        selector: 'chart',
        title: 'Important Data',
        width: 300,
        height: 200,
        data: [120, 140, 70, 90, 110, 65, 210]      
      }
    }
  }
}

If passed as an array of objects you will need to define which attribute to use as your metric / dimension

export default {
  name: 'example',
  data () {
    return {
      chartData: {
        chartType: "vBarChart",
        selector: "chart",
        title: "Important Data",
        width: 400,
        height: 200,
        metric: 'count', // for two or more metrics pass as an array ['count', 'pyCount']
        data: [
          {'count': 120,
           'fruit': 'apples'}, 
          {'count': 250,
           'fruit': 'oranges'}
        ]
      }
    }
  }
}

Bubble Charts require three metrics (v1, v2, and v3). These should be passed as metrics

export default {
  name: 'example',
  data () {
    return {
      chartData: {
        chartType: "bubbleChart",
        selector: "chart",
        title: "Important Data",
        width: 400,
        height: 200,
        metric: ['count', 'pyCount', 'revenue']
        data: [
          {'count': 120,
           'pyCount': 115,
           'revenue': 170,
           'fruit': 'apples'}, 
          {'count': 250,
           'pyCount': 255,
           'revenue': 325,
           'fruit': 'oranges'}
        ]
      }
    }
  }
}

Overrides

If you need to override any of the default values of the charts (pallette colors, ticks, margins, etc) you can pass an overrides object to you chartData.

      vBarChartData: {
        chartType: "vBarChart",
        ...   
        overrides: {
           palette: {
            fill: 'red',
          },
          y: {
            ticks: 20,
          },
        }
      },

Legends

Legends are turned off by default. You can add a legend to a chart by including a legends objects in your chartData as such:

chartData: {
  chartType: "vBarChart",
  ...
  legends: {
    enabled: true,
    height: 25,
    width: 50,
  }
}

Gridlines

Gridlines are turned off by default. You can include and configure your gridlines via the configuration object:

chartData: {
  chartType: "barChart",
  ...
  grid: {
    enabled: true,
    gridTicks: 25,
  }
}

Goals

Goals are used to place a line on your graph showing where your target is for the period:

chartData: {
  chartType: "lineGraph",
  ...
  goal: 500,
}

Labels

Labels are assigned to the x and y axis:

chartData: {
  chartType: "lineGraph",
  ...
  label: true,
}

Chart types currently supported:

  • barChart: a chart in which the numerical values of variables are represented by the width of rectangles of equal height.
  • vBarChart: a chart in which the numerical values of variables are represented by the height of rectangles of equal width.
  • lineGraph: a graph which displays information as a series of data points called 'markers' connected by straight line segments.
  • scatterPlot: a graph in which the values of two variables are plotted along two axes, the pattern of the resulting points revealing any correlation present.
  • pieChart: a chart in which a circle is divided into slices to illustrate proportion
  • areaChart: a chart which displays graphically quantitative data
  • bubleChart: a bubble chart is a variation of a scatter chart in which the data points are replaced with bubbles, and an additional dimension of the data is represented in the size of the bubbles.

Charts that support two or more metrics

  • barChart
  • vBarChart
  • lineGraph

Lastly you will need to add the component and bind your data

<v-chart v-bind:chartData="chartData"></v-chart>

If you wish to style the components of the chart you can via the selectors:

<style>
  .chart-barChart {
    fill:blue;
  }
</style>

Performance Consideration

By default all charts are imported into v-chart-plugin.js. This allows all charts to share one common interface. If you are only using a few select charts in your implementation you can remove those unused charts from the import statements in the v-chart-plugin.js.

import barChart     from './import/barChart' 
import vBarChart    from './import/vBarChart'
import lineGraph    from './import/lineGraph'
import scatterPlot  from './import/scatterPlot'
import pieChart     from './import/pieChart'
import areaChart    from './import/areaChart'

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# run test scripts
npm run test

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# build module
npm run compile

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

Comments

  • Bump tar from 4.4.8 to 4.4.19
    Bump tar from 4.4.8 to 4.4.19

    Sep 1, 2021

    Bumps tar from 4.4.8 to 4.4.19.

    Commits
    • 9a6faa0 4.4.19
    • 70ef812 drop dirCache for symlink on all platforms
    • 3e35515 4.4.18
    • 52b09e3 fix: prevent path escape using drive-relative paths
    • bb93ba2 fix: reserve paths properly for unicode, windows
    • 2f1bca0 fix: prune dirCache properly for unicode, windows
    • 9bf70a8 4.4.17
    • 6aafff0 fix: skip extract if linkpath is stripped entirely
    • 5c5059a fix: reserve paths case-insensitively
    • fd6accb 4.4.16
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump prismjs from 1.16.0 to 1.25.0
    Bump prismjs from 1.16.0 to 1.25.0

    Sep 20, 2021

    Bumps prismjs from 1.16.0 to 1.25.0.

    Release notes

    Sourced from prismjs's releases.

    v1.25.0

    Release 1.25.0

    v1.24.1

    Release 1.24.1

    v1.24.0

    Release 1.24.0

    v1.23.0

    Release 1.23.0

    v1.22.0

    Release 1.22.0

    v1.21.0

    Release 1.21.0

    v1.20.0

    Release 1.20.0

    v1.19.0

    Release 1.19.0

    v1.18.0

    Release 1.18.0

    v1.17.1

    Release 1.17.1

    v1.17.0

    Release 1.17.0

    Changelog

    Sourced from prismjs's changelog.

    1.25.0 (2021-09-16)

    New components

    Updated components

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by rundevelopment, a new releaser for prismjs since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump object-path from 0.11.4 to 0.11.8
    Bump object-path from 0.11.4 to 0.11.8

    Sep 21, 2021

    Bumps object-path from 0.11.4 to 0.11.8.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump url-parse from 1.4.7 to 1.5.3
    Bump url-parse from 1.4.7 to 1.5.3

    Oct 5, 2021

    Bumps url-parse from 1.4.7 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump follow-redirects from 1.7.0 to 1.14.7
    Bump follow-redirects from 1.7.0 to 1.14.7

    Jan 13, 2022

    Bumps follow-redirects from 1.7.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump shelljs from 0.7.8 to 0.8.5
    Bump shelljs from 0.7.8 to 0.8.5

    Jan 15, 2022

    Bumps shelljs from 0.7.8 to 0.8.5.

    Release notes

    Sourced from shelljs's releases.

    v0.8.5

    This was a small security fix for #1058.

    v0.8.4

    Small patch release to fix a circular dependency warning in node v14. See #973.

    v0.8.3

    Closed issues:

    • Shelljs print stderr to console even if exec-only "silent" is true #905
    • refactor: remove common.state.tempDir #902
    • Can't suppress stdout for echo #899
    • exec() doesn't apply the arguments correctly #895
    • shell.exec('npm pack') painfully slow #885
    • shelljs.exec cannot find app.asar/node_modules/shelljs/src/exec-child.js #881
    • test infra: mocks and skipOnWin conflict #862
    • Support for shell function completion on IDE #859
    • echo command shows options in stdout #855
    • silent does not always work #851
    • Appveyor installs the latest npm, instead of the latest compatible npm #844
    • Force symbolic link (ln -sf) does not overwrite/recreate existing destination #830
    • inconsistent result when trying to echo to a file #798
    • Prevent require()ing executable-only files #789
    • Cannot set property to of [object String] which has only a getter #752
    • which() should check executability before returning a value #657
    • Bad encoding experience #456
    • phpcs very slow #440
    • Error shown when triggering a sigint during shelljs.exec if process.on sigint is defined #254
    • .to\(file\) does not mute STDIO output #146
    • Escaping shell arguments to exec() #143
    • Allow multiple string arguments for exec() #103
    • cp does not recursively copy from readonly location #98
    • Handling permissions errors on file I/O #64

    Merged pull requests:

    ... (truncated)

    Changelog

    Sourced from shelljs's changelog.

    Change Log

    Unreleased

    Full Changelog

    Closed issues:

    • find returns empty array even though directory has files #922
    • exec() should support node v10 (maxbuffer change) #915
    • grep exit status and extra newlines #900
    • Travis CI currently broken #893
    • Drop node v4 support #873
    • cp -Ru respects the -R but not the -u #808

    Merged pull requests:

    v0.8.3 (2018-11-13)

    Full Changelog

    Closed issues:

    • Shelljs print stderr to console even if exec-only "silent" is true #905
    • refactor: remove common.state.tempDir #902
    • Can't suppress stdout for echo #899
    • exec() doesn't apply the arguments correctly #895
    • shell.exec('npm pack') painfully slow #885
    • shelljs.exec cannot find app.asar/node_modules/shelljs/src/exec-child.js #881
    • test infra: mocks and skipOnWin conflict #862
    • Support for shell function completion on IDE #859
    • echo command shows options in stdout #855
    • silent does not always work #851
    • Appveyor installs the latest npm, instead of the latest compatible npm #844
    • Force symbolic link (ln -sf) does not overwrite/recreate existing destination #830
    • inconsistent result when trying to echo to a file #798
    • Prevent require()ing executable-only files #789
    • Cannot set property to of [object String] which has only a getter #752

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Clean up jsdocs
    Clean up jsdocs

    Oct 24, 2018

    Need someone to go through and fix up the comments on all the functions so that the jsDocs are accurate.

    good first issue Hacktoberfest 
    Reply
  • ERROR in ./node_modules/v-chart-plugin/src/v-chart-plugin.js
    ERROR in ./node_modules/v-chart-plugin/src/v-chart-plugin.js

    Oct 25, 2018

    I installed this plugian via npm install v-chart-plugin When I try to include the JS file of the plugin npm doesn't compile and I get this error

    Module parse failed: Unexpected token (111:16)
    You may need an appropriate loader to handle this file type.
    |                  * @description Bar chart directive
    |                  */
    |                 ...((typeof barChart !== 'undefined') && { barChart: barChart }),
    |                 /**
    |                  * @method vBarChard
    

    When I manually remove this lines

                    /**
                     * @method barChart
                     * @description Bar chart directive
                     */
                    ...((typeof barChart !== 'undefined') && { barChart: barChart }),
                    /**
                     * @method vBarChard
                     * @description Verticle Bar chart directive
                     */
                    ...((typeof vBarChart !== 'undefined') && { vBarChart: vBarChart }),
                    /**
                     * @method scatterPlot
                     * @description Scatter Plot directive
                     */
                    ...((typeof scatterPlot !== 'undefined') && { scatterPlot: scatterPlot }),
                    /**
                     * @method pieChart
                     * @description Pie chart directive
                     */
                    ...((typeof pieChart !== 'undefined') && { pieChart: pieChart }),
                    /**
                     * @method areaChart
                     * @description Area chart directive
                     */
                    ...((typeof areaChart !== 'undefined') && { areaChart: areaChart }),
                    /**
                     * @method lineGraph
                     * @description Line Graph directive
                     */
                    ...((typeof lineGraph !== 'undefined') && { lineGraph: lineGraph }),
    

    It's included correctly

    Reply
  • Failed to mount component
    Failed to mount component

    Jan 30, 2019

    Hi!

    i can't use this plugin and i don't understand why this is my vue file component :

    <template>
        <v-chart v-bind:chartData="chartData"></v-chart>
    </template>
    
    
    <script>
        import Chart from 'v-chart-plugin'
    
        export default {
            components: {
              'v-chart': Chart,
            },
            data () {
                return {
                    chartData: {
                        chartType: "bubbleChart",
                        selector: "chart",
                        title: "Important Data",
                        width: 400,
                        height: 200,
                        metric: ['count', 'pyCount', 'revenue'],
                        data: [
                            {'count': 120,
                                'pyCount': 115,
                                'revenue': 170,
                                'fruit': 'apples'},
                            {'count': 250,
                                'pyCount': 255,
                                'revenue': 325,
                                'fruit': 'oranges'}
                        ]
                    }
                }
            }
        }
    </script>
    

    But i've this message when compiling

    [Vue warn]: Failed to mount component: template or render function not defined.

    Someone can help me?! Thanks.

    Reply
  • Add Optional Legends
    Add Optional Legends

    Oct 7, 2018

    Chart Legend provides short description of Data being rendered on Chart. Improves readability when there are multiple Data Series.

    enhancement Hacktoberfest 
    Reply
  • Add a minimum scale value for the X axis
    Add a minimum scale value for the X axis

    Apr 5, 2019

    Hello, I need to have a minimum value for the X axis scale For the moment I have made this changes, I hope it can serve someone else. It is used as follows:

    v-bind:chartData="{
            ...chartData,
            ...{ chartType: 'barChart' },
            ...{ selector: 'asset' + this.title },
            ...{ title: 'Assets' },
            ...{ minX: 500 },
    

    This is the patch. It is in my GIT in case someone needs it

    
    diff --git a/src/v-chart-plugin.js b/src/v-chart-plugin.js
    index 090c202..fd5b147 100644
    --- a/src/v-chart-plugin.js
    +++ b/src/v-chart-plugin.js
    @@ -210,6 +210,7 @@ const Chart = {
                 .attr('y1', y1)
                 .attr('y2', y2)
                 .attr('id', 'goal')
    +            .attr('id', 'minX')
                 .style('stroke', '#708090')
                 .style('stroke-width', 1)
             },
    @@ -352,6 +353,7 @@ const Chart = {
               results.forEach((e) => {
                 max = max > e ? max : e;
               });
    +          if (this.chartData.minX > max ) return this.chartData.minX;
               return max;
             },
             /**
    
    
    Reply
  • Add eslint configuration for project
    Add eslint configuration for project

    Oct 23, 2018

    We don't currently have any ESLint configuration. Would need someone to install / configure eslint using airbnb standards: https://www.npmjs.com/package/eslint-config-airbnb-standard

    help wanted good first issue Hacktoberfest 
    Reply