[Vuejs]-Highcharts, vue component. 3 charts in 1

by

0👍

@Wojciech Chmiel
Hi, sorry for the delay. A columnrange chart with a bloxplot and 2 scatter

initChart (data) {
      this.chartOptions = merge(this.getBaseChartConfig(ChartTypes.BoxPlot), {
        xAxis: {
          categories: data.periods
        },
        series: [
          {
            type: 'columnrange',
            name: 'Observations',
            data:data.peerGroupStatisticReturns.dataRange,
            showInLegend: false
          },
          {
            type: 'boxplot',
            linkedTo: ':previous',
            data: data.peerGroupStatisticReturns.values
          },
          {
            type: 'scatter',
            name: data.names[1],
            marker: {
              symbol: 'diamond',
              fillColor: '#6598FD',
              radius: 6
            },            
            data: data.benchmarkReturnSeries.data
          },
          {
            type: 'scatter',
            name: data.names[2],
            marker: {
              symbol: 'square',
              fillColor: '#FFCC33'
            },            
            data: data.productReturnSeries.data
          }
        ]
      })
      
      // chart settings
const boxPlotConfig = {
  title: {
    text: ''
  },
  plotOptions: {
    boxplot: {
      fillColor: '#0076C0',
      medianColor: '#303030',
      medianWidth: 1,
      stemWidth: 0,
      whiskerWidth: 0,
      color: '#303030',
      showInLegend: false
    },
    columnrange: {
      color: '#66ADD9'
    },
    series: {
      enableMouseTracking: false,
      borderColor: '#303030'
    }
  },
  
  yAxis: {
    title: ''
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Now I have make the colors interspersed and move the markers so the dont overlap, one to the right inside the column and one to the left

Leave a comment