Vue-Highcharts

by Ben Clayton

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/highcharts-vue.min.js"></script>

<div id="app">
  <div class="title-row">
    <p>Set the chart title here:</p>
    <input type="text" v-model="title">
  </div>
  <highcharts :options="chartOptions"></highcharts>
</div>

CSS

.title-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #eee;
  padding: 20px;
}

JavaScript

Vue.use(HighchartsVue.default)

var app = new Vue({
  el: "#app",
  data() {
    return {
      chartOptions: {
        chart: {
          type: 'spline'
        },
        title: {
          text: 'Entire title'
        },
        series: [{
          data: [10, 0, 8, 2, 6, 4, 5, 5]
        }]
      },
      title: ''
    }
  },
  watch: {
    title(newValue) {
      if (newValue === '') {
        this.chartOptions.title.text = 'Entire title'
      } else {
      	this.chartOptions.title.text = newValue
      }

    }
  }
})