Chartjsの横スクロールが右端からの時だけ動かない

nuxtとchartjsでグラフの横スクロールを実装した際に、chartを表示するカスタムpluginタグの candle-stick-chart内のstyleをfloat: leftにすると左にグラフが寄った状態から表示されて、右にスクロールできるのですが、style="float: right"をやるとチャートがそこで固定されてしまって、左にスクロールできません。

理由わかるかたいらっしゃいますでしょうか？

package.json

json
1{
2  "name": "front",
3  "version": "1.0.0",
4  "description": " myNuxt.js project",
5  "author": "test",
6  "private": true,
7  "scripts": {
8    "dev": "nuxt",
9    "build": "nuxt build",
10    "start": "nuxt start",
11    "generate": "nuxt generate",
12    "lint": "eslint --fix pages/**/*.{js,vue}",
13    "precommit": "yarn lint"
14  },
15  "dependencies": {
16    "@nuxtjs/axios": "^5.3.6",
17    "@nuxtjs/pwa": "^3.0.0-0",
18    "bootstrap-vue": "^2.15.0",
19    "chart.js": "^2.9.4",
20    "chartjs-plugin-zoom": "^0.7.7",
21    "node-sass": "^4.11.0",
22    "nuxt": "^2.0.0",
23    "sass-loader": "^7.1.0",
24    "vue-chartjs": "^3.5.1",
25    "vue-chartjs-financial": "^1.0.1",
26    "vue-template-compiler": "^2.6.11",
27    "vue2-transitions": "^0.3.0"
28  },
29  "devDependencies": {
30    "@nuxtjs/eslint-config": "^2.0.0",
31    "@nuxtjs/eslint-module": "^1.0.0",
32    "babel-eslint": "^10.0.1",
33    "eslint": "^6.1.0",
34    "eslint-plugin-nuxt": ">=0.4.2",
35    "vue-cli-plugin-i18n": "^0.5.1"
36  }
37}
38
39

plugins/candle-stick-chart.js

javascript
1import Vue from 'vue'
2import { Candlestick, mixins } from 'vue-chartjs-financial'
3const { reactiveProp } = mixins
4
5Vue.component('candle-stick-chart', {
6  extends: Candlestick,
7  mixins: [reactiveProp],
8  props: ['options'],
9  mounted () {
10    this.renderChart(this.chartData, this.options)
11  }
12})
13

pages/test.vue

javascript
1<template>
2  <div>
3    <b-container fluid>
4      <b-row align-v="end">
5        <b-col sm="12">
6          <b-row>
7            <b-col sm="12">
8              <b-card class="rounded-0">
9                <b-card-body>  
10                  <div class="chartAreaWrapper">
11                    <candle-stick-chart :chart-data="datacollection" :options="options"  class="walking-speed-chart" style="float: right"/>
12                  </div>
13                </b-card-body>
14              </b-card>
15            </b-col>
16          </b-row>
17        </b-col>
18      </b-row>
19    </b-container>
20  </div>
21</template>
22
23<script>
24export default {
25  data () {
26    return {
27      datacollection: {},
28      options: {}
29    }
30  },
31  mounted () {
32    this.fillData()
33    this.fillData2()
34  },
35  methods: {
36    fillData () {
37      console.log(this.generateRandomChartData())
38      this.datacollection = {
39        labels: ['1/1','1/2','1/3','1/4','1/5','1/6','1/7',
40            '1/8','1/9','1/10'
41        ],
42        datasets: [
43          {
44            label: 'OHLC',
45            data: this.generateRandomChartData(),
46            yAxisID: "y-axis-1",
47          },
48          {
49            label: 'line',
50            data: ['0.155','0.118','0.121','0.068','0.083','0.060','0.067',
51            '0.121','0.121','0.150','0.118','0.097','0.078','0.127',
52            '0.155','0.140','0.101','0.140','0.041','0.093','0.189',
53            '0.146','0.134','0.127','0.116','0.111','0.125','0.116'
54            ],
55            type: "line",
56            yAxisID: "y-axis-2",
57          }
58        ]
59      }
60    },
61    generateRandomChartData (initial = 1000, count = 10, changeRange = 100) {
62      let o = initial; let h; let l; let c; let t = new Date('2001-01-01').getTime()
63      return [...Array(count)].map((_, i) => {
64        o = c || o
65        h = o + (this.randomChange(changeRange) / 2)
66        l = o - (this.randomChange(changeRange) / 2)
67        c = o + (this.randomChange(changeRange) - (changeRange / 2))
68        t += (24 * 60 * 60 * 1000)
69        return {
70          o, h, l, c, t
71        }
72      })
73    },
74    generateRandomData (initial = 1000, count = 10, changeRange = 100) {
75      let o = initial; let t = new Date('2020-01-01').getTime()
76      return [...Array(count)].map((_, i) => {
77        t += (24 * 60 * 60 * 1000)
78        return {
79          o, h
80        }
81      })
82    },
83    randomChange (range = 100) {
84      return Math.random() * range
85    },
86    fillData2 () {
87      this.options = {
88        responsive: true,
89        maintainAspectRatio: false,
90        scales: {
91          yAxes: [{
92            id: "y-axis-1",   
93            position: "left", 
94            }, {
95            id: "y-axis-2",
96            position: "right",
97          }],
98        },
99      }
100    },
101  }
102}
103</script>
104<style>
105  .chartAreaWrapper {
106       width: 80%;
107       overflow-y: hidden;
108       overflow-x: scroll;
109  }
110
111  .walking-speed-chart{
112       margin-top: 20px;
113       height: 1000px;
114       width: 1200px;
115  }
116</style>