Hello ;-)
I would like to be able to dynamically manage the props
"date. outputFormat";
to change the value% Y% d ...

the other options seem to work: points, currentKey ...

but not the date options?

Thank you in advance for your answer and thank you for these great graphs ;-)

Add a linter and fix all the mess

Hi,

I'm learning vue and I would like to add a chart to my project by using vue-d3-charts within a component in my vue.js app.

I have created a bar-chart component from using the documentation and imported it into my app but it will not render the actual bar chart. When I use dev tools to inspect the bar chart I can see the associated div's and svg for the bar chart but the chart doesn't render onto the page.

Any tips would be appreciated.

Here is my app.vue:

<template>
  <main id="app">
    <bar-chart />
    <section class="products">
      <!-- A prop called product which takes the object product created in the for loop - in turn creating a prop that contains one product item from the products object-->
      <product-card
        v-for="product in products"
        :key="product.color"
        :productDataProp="product"
      />
    </section>
  </main>
</template>

<script>
import ProductCard from "./components/ProductCard.vue";


import BarChart from "./components/BarChart.vue";

export default {
  name: "App",
  components: {
    ProductCard,
    BarChart,
  },
  data() {
    return {
      products: [
        {
          title: "Nike Air Max",
          color: "green",
          bgtext: "NIKE",
          src: require("./assets/green-shoe.png"),
        },
        {
          title: "Nike flex",
          color: "blue",
          bgtext: "AIR",
          src: require("./assets/blue-shoe.png"),
        },
        {
          title: "Nike Roche Runs",
          color: "pink",
          bgtext: "MAX",
          src: require("./assets/pink-shoe.png"),
        },
      ],
    };
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "montseratt", sans-serif;
}
main {
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.products {
  display: flex;
  max-width: 1280px;
  padding: 25;
  margin: 0 auto;
}
</style>

This is the BarChart component:

<template>
  <div class="bar-chart">
    <D3BarChart :config="chart_config" :datum="chart_data"></D3BarChart>
  </div>
</template>
<script>
import { D3BarChart } from "vue-d3-charts";

export default {
  name: "BarChart",
  components: { D3BarChart },
  data() {
    return {
      chart_config: {
        key: "name",
        value: "total",
        color: { current: "#41B882" },
        transition: { ease: "easeBounceOut", duration: 1000 },
      },
      chart_data: [
        {
          iphone: 123,
          android: 208,
          when: "2019-08-01",
        },
        {
          iphone: 165,
          android: 201,
          when: "2019-09-01",
        },
      ],
    };
  },
};
</script>

When adding data, points are added to the chart but the lines (paths) are not extended to the new points.

An error occured while showing the error page
Unfortunately an error occured and while showing the error page another error occured

Error details: TypeError: this.chart.destroyChart is not a function

Just trying to create a line graph using sample data and configuration as supplied on this page but gettting the error:

this.cfg.values.forEach is not a function

When I inspect the code I can see that this.cfg.values is false

Any chance for a different or a dual license?

The GPL is tainting and therefor a big headache on the legal side. It may severely limit who can use it like this.

https://stackoverflow.com/questions/1239470/restrictions-of-gpl-on-javascript-libraries

The word cloud chart does not show Persian and Arabic texts.
my data :

data= [
   {
      size:265919
      word:"ایران"
   },
   {
      size:263271
      word:"قران"
   },
   {
      size:259770
      word:"اسلام"
   }
];

but chart show blank box.

Hello,

Thanks for your nice plugin, very easy to use.

I'm facing a problem while data are updated, some points are remaining on graph but not on Linear Chart and when i hover the mouse on that i get " Uncaught TypeError: this.tData[i].values[j] is undefined"

Maybe it's updating cycle ? Could you help me please ?

Thanks

It would be great if the bar chart component had an option to stack values.

It would be great if there was an area chart option.

Is there any options for Legend in the vue-d3-charts?

App.vue

<script>
import { D3BarChart } from 'vue-d3-charts'
...

Received: export 'D3BarChart' was not found in 'vue-d3-charts'

When the graph is init, it exceeds of its container if the container has max-width: 100%, however if the window is resized, the graph scales back properly.

Hi all,

Just be aware that the following issue can cause problems when using and compiling the source and using the
latest version of D3.

https://stackoverflow.com/questions/63693132/unable-to-get-node-datum-on-mouseover-in-d3-v6

Just wasted a couple of hours trying to figure out why the tooltip was producing: "undefined: undefined" and
it is because the first argument is the "event" and no longer the "datum" "d" in D3 V6. For now I just went back to
D3 V5.

It would be great if you could tag a release and push it out to npm.
Thanks!

It will be great if we can use D3Histogram in the same elegant way as D3BarChart, e.g.,

When trying to use the barchart with a tooltip override, I've noticed that this was not being applied.

Configs:

      config: {
        key: 'year',
        currentKey: '2004',
        values: ['hours'],
        tooltip: { label: 'tooltipLabel' },
        axis: {
          yTicks: 4
        },
        color: {default: '#222f3e', current: '#41B882'}
      },

Data:

      data: [
        {hours: 238, year: '2000', tooltipLabel: 'Worked Hours'},
        {hours: 938, year: '2001', tooltipLabel: 'Worked Hours'},
        {hours: 1832, year: '2002', tooltipLabel: 'Worked Hours'},
        {hours: 2092, year: '2003', tooltipLabel: 'Worked Hours'},
        {hours: 2847, year: '2004', tooltipLabel: 'Worked Hours'},
        {hours: 2576, year: '2005', tooltipLabel: 'Worked Hours'},
        {hours: 2524, year: '2006', tooltipLabel: 'Worked Hours'},
        {hours: 1648, year: '2007', tooltipLabel: 'Worked Hours'},
        {hours: 2479, year: '2008', tooltipLabel: 'Worked Hours'},
        {hours: 3200, year: '2009', tooltipLabel: 'Worked Hours'},
      ],

After looking into the code (d3.barchart.js), I've also noticed that this overide is never being applied.
Here is the snippet that generates the tooltip (lines 224-227):

        const key = this.cfg.values[i % this.cfg.values.length];
        this.tooltip.html(() => {
          return `<div>${key}: ${d[key]}</div>`
        })

Hi,

ERROR in ./node_modules/vue-d3-charts/dist/vue-d3-charts.esm.js
Module parse failed: Unexpected token (690:20)
You may need an appropriate loader to handle this file type.
|     });
|     const rects = newbars.selectAll('.chart__bar').data(d => this.cfg.values.map(v => {
|       const dat = { ...d
|       };
|       dat[this.cfg.key] = d[this.cfg.key];

What may be the problem?
How to fix it?

It would be great to be able to graph negative values in D3barChart :D !

Hi,

i am looking for creating dual axes line bar chart using vue-d3-charts.
Any thoughts on this, would be helpful

In axis I am passing yFormat like this
yFormat: '€'

But getting error like formatter error

Invalid format: €

And one more thing instead of euro i am giving $ it's working ,but it is also coming before the value like $10
How to make it as a 10$

Help me on this

Hey
First of all thank you very much for this library. It looks so nice :)

I get the following error when I try to remove items from the config.values array dynamically:

[Vue warn]: Error in callback for watcher "config": "TypeError: this.tData[i] is undefined"

found in

---> <D3LineChart>
       <Chart> at src/components/Graph.vue
         <Layout> at src/components/Layout.vue
           <App> at src/App.vue
             <Root> vue.runtime.esm.js:619

TypeError: "this.tData[i] is undefined"
    updateElements vue-d3-charts.esm.js:1061
    tweenValue tween.js:75
    default each.js:5
    tweenValue tween.js:73
    default attr.js:75
    updateElements vue-d3-charts.esm.js:1061
    updateChart vue-d3-charts.esm.js:469
    resizeChart vue-d3-charts.esm.js:481
    updateConfig vue-d3-charts.esm.js:491
    handler vue-d3-charts.esm.js:58
    VueJS 11
    select SelectStats.vue:38
    click SelectStats.vue:16
    VueJS 26
    _callee$ App.vue:21
    tryCatch runtime.js:45
    invoke runtime.js:274
    method runtime.js:97
    node_modules asyncToGenerator.js:12
    node_modules asyncToGenerator.js:34
    promise callback*asyncGeneratorStep@webpack-internal:///./node_modules/ asyncToGenerator.js:22
    node_modules asyncToGenerator.js:34
    node_modules asyncToGenerator.js:41
    node_modules asyncToGenerator.js:30
    mounted App.vue:20
    VueJS 11
    <anonymous> main.js:8
    js app.js:1336
    __webpack_require__ app.js:785
    fn app.js:151
    1 app.js:1372
    __webpack_require__ app.js:785
    checkDeferredModules app.js:46
    <anonymous> app.js:861
    <anonymous> app.js:864
vue.runtime.esm.js:1888

My vue component looks like this:

<template>
  <div>
    <SelectStats @selection="selected" :data="data" />
    <div class="chart-container">
      <D3LineChart v-if="data" :config="config" :datum="data" />
    </div>
  </div>
</template>

<script>
import { D3LineChart } from "vue-d3-charts";
import SelectStats from "./SelectStats";
export default {
  name: "Chart",
  components: { D3LineChart, SelectStats },
  props: {
    data: { type: Array, required: false }
  },
  data() {
    return {
      config: {
        ...
        values: []
      }
    };
  },
  methods: {
    selected(arr) {
      this.config.values.splice(0, this.config.values.length, ...arr);
      console.log(this.config);
    }
  }
};
</script>

I have a faily small repo that currently has the problem here

I'm trying to generate barchart from a json axios response. I've called axios during mounted() hook but chart is not generated.
SVG contains some elements but it's width is 0px.

I've changed chart_data and chart_options elements inside axios response promise.

When data is changed, chart's axis need to be transitioned

I'd like to add custom texts instead of dates on the x-axis like this:

How can i do this?

My current config and data looks like this:

Hi! Are there any plans for TS support?

I can try to contribute and do some, starting with enabling importing components without compile errors and typing for config files, but I would like to hear if it even would be considered 😅