Unable to get vue-d3-charts to render

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>

Saigesp / vue-d3-charts

Unable to get vue-d3-charts to render #31