<template>
<chart class="xp-bar" :options="options" ref="bar" auto-resize></chart>
</template>

<script>
import { setOptions } from './options'

export default {
  name: 'XpBar',

  data() {
    return {
      options: {},
    }
  },

  props: {
    settings: {
      type: Object,
      default: () => {}
    },
  },

  watch: {
    settings(newVal) {
      this.options = setOptions(this.settings)
    },
  },

  mounted() {
    this.options = setOptions(this.settings)
  },
}
</script>
