[Vuejs]-Vue: data is not binding to props therefore not rendering BarChart using vue-D3-charts

by

0👍

✅

I have made minor changes in BarChart.vue, and it is working. Can you try below:

Few issues that I found and fixed are:

  1. div "bar-chart" width is too small, so it is not able to generate chart.
  2. In "chart_config" key and values where incorrect acc. to your "chart_data".

BarChart.vue

<template>
  <div class="bar-chart" style="border:1px solid black; width:90%">
    <D3BarChart :config="chart_config" :datum="chart_data"></D3BarChart>
  </div>
</template>
<script>
import { D3BarChart } from 'vue-d3-charts';

export default {
  components: {
    D3BarChart,
  },
  data() {
    return {

      chart_data: [
        {
          iphone: 123,
          android: 208,
          when: "2019-08-01",
        },
        {
          iphone: 165,
          android: 201,
          when: "2019-09-01",
        }
      ],
      chart_config: {
        key: 'when',
        values: ['iphone','android'],
        color: { 
            default: '#222f3e',
            current: '#41B882'
        },
        transition: { ease: "easeBounceOut", duration: 1000 },
      }
    }
  }
}
</script>

Leave a comment