Vuejs - Chartjs doesn't render my own options with api request

Question

I have a problem when I want to fill my chart with my api. My chart's extraOptions are set, but when I want to render my chart with it, it takes defaults options.

Here is my component:

import { Bar, mixins } from 'vue-chartjs';

export default {
  name: 'bar-chart',
  extends: Bar,
  mixins: [mixins.reactiveProp],
  props: {
    extraOptions: Object,
    chartData: Object,

  },
  data() {
    return {
      ctx: null
    };
  },
  methods: {
    
  },
  mounted() {
    this.renderChart(
      this.chartData,
      this.extraOptions
    );
    this.$watch('chartData', (newVal, oldVal) => {
      if (!oldVal) {
        console.log(this.extraOptions)
        this.renderChart(
          this.chartData,
          this.extraOptions
        );
      }
    }, { immediate: true });
  }
};

And my overview with my Options and call api:

  <div class="row">
        <div class="col-lg-4">
          <card>
          <bar-chart :height="heightChart" :extraOptions="optionsBar" :chart-data="BarData"> </bar-chart >
          </card>
        </div>
  </div>
</template>
<script>
  import Loading from 'src/components/Dashboard/Layout/LoadingMainPanel.vue'
  import LineChart from 'src/components/UIComponents/Charts/LineChart.vue'
  import pieca from 'src/components/UIComponents/Charts/pieca.vue'
  import Clock from './Clock.vue'
  import BarChart from 'src/components/UIComponents/Charts/BarChart'
  import axios from 'axios'


  const WorldMap = () => ({
    component: import('./../Maps/WorldMap.vue'),
    loading: Loading,
    delay: 200
  })

  export default {
    components: {
      LineChart,
      pieca,
      Clock,
      BarChart
    },
    /**
     * Chart data used to render stats, charts. Should be replaced with server data
     */
    data () {
      return {
        optionsLine: {
          responsive: true,
          maintainAspectRatio: false,
          title: {
            display: true,
            text: 'CA Mensuel/12 mois',
            fontSize: 17,
            fontFamily: "'Montserrat', 'Helvetica Neue', Arial, sans-serif",
            fontStyle: 'normal',
            fontColor: 'black',
          }
        },
        optionsBar: {
          maintainAspectRatio: false,
          legend: {
            display: false,
            labels: {
              fontColor: '#ced4da'
            }
          },
          title: {
            display: true,
            text: 'Cmd/Transporteur',
            fontSize: 17,
            fontFamily: "'Montserrat', 'Helvetica Neue', Arial, sans-serif",
            fontStyle: 'normal',
            fontColor: 'black',
          },
          responsive: true,
          tooltips: {
            backgroundColor: '#f5f5f5',
            titleFontColor: '#333',
            bodyFontColor: '#666',
            bodySpacing: 4,
            xPadding: 12,
            mode: "nearest",
            intersect: 0,
            position: "nearest"
          },
          legend: {
            display:true,
            position: 'bottom'
          },
          scales: {
            yAxes: [{
        
              stacked: true,
              gridLines: {
                drawBorder: false,
                color: 'rgba(29,140,248,0.1)',
                zeroLineColor: "transparent",
              },
              ticks: {
                suggestedMin: 60,
                suggestedMax: 120,
                padding: 20,
                fontFamily: "'Poppins',sans-serif",
                fontColor: "#ced4da"
              }
            }],
            xAxes: [{
        
              stacked: true,
              gridLines: {
                drawBorder: false,
                color: 'rgba(29,140,248,0.1)',
                zeroLineColor: "transparent",
              },
              ticks: {
                padding: 20,
                fontFamily: "'Poppins',sans-serif",
                fontColor: "#ced4da"
              }
            }]
          }
        },

        heightChart: 255,

        BarData: {

        },

And my api request:

      axios
        .get('api_url')
        .then(response => (globalthis.BarData = response.data.transporteur_jour
        ))

I think my chart is rendering with my extraOptions and when it's fill with api data, it takes the defaults options. When I don't call my api and fill the labels directly in my overview, it works. How can I do to keep my extraOptions ?

Thanks

Answer 1

i had the same problem with chart data in nuxt.js

add a key to your component and when you get the api response change the value of the key . Vue will re-render the component after this change

my component :

  <LineChartComponent :chart-data="datacollection" :height="400" :key="datacollection.key"></LineChartComponent>