Highcharts，vue组件。 3 图表合 1

Question

expected chart

Hi, I need to make this charts, looks like 3 charts in 1(?). I can make the 2 scatered ones, but the column charts its tricky. Thanks to Wojciech Chmiel I was able to make this columns charts with highcharts-vue, but the chart behaviour its a little odd, I cant add a yAxis, nor stop the chart from pushing to the top like a sort of responsive behaviour.

Answer 1

@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