diff --git a/resources/js/components/Evaluations/Single/Components/Step5/FutureRiskGraph.vue b/resources/js/components/Evaluations/Single/Components/Step5/FutureRiskGraph.vue index 62b2b29999a2c9e15c99adfe9966128e62cc506c..015f64bd64f4f1c21775437ea8ba2f04311f5af2 100644 --- a/resources/js/components/Evaluations/Single/Components/Step5/FutureRiskGraph.vue +++ b/resources/js/components/Evaluations/Single/Components/Step5/FutureRiskGraph.vue @@ -1,5 +1,5 @@ <template> - <Bar v-if="loaded && chartData" :chart-data="chartData" :chart-options="options" /> + <Bar v-if="loaded && chartData" :chart-data="chartData" :chart-options="options" style="max-width:500px!important;max-height:500px!important;margin: auto;"/> <div v-else class=" text-center"> <i class="fas fa-spin fa-spinner"></i> </div> @@ -21,9 +21,15 @@ export default { return { loaded: this.$store.state.graphs[this.evaluation.id] && this.$store.state.graphs[this.evaluation.id].risks && this.$store.state.graphs[this.evaluation.id].futurerisks, options: { + responsive: true, plugins: { legend: { - display: true + display: true, + labels: { + font: { + size: 10 + } + } }, tooltip: { callbacks: { @@ -50,7 +56,10 @@ export default { autoSkip: false, maxRotation: 40, minRotation: 40, - } + font: { + size: 9 + }, + }, }, y: { min: 0, diff --git a/resources/js/components/Evaluations/Single/View/index.vue b/resources/js/components/Evaluations/Single/View/index.vue index b20db4592a140f210282833b332431bfc6468aa4..c58964988cba73378bf2f9da7ba451b910d82448 100644 --- a/resources/js/components/Evaluations/Single/View/index.vue +++ b/resources/js/components/Evaluations/Single/View/index.vue @@ -44,7 +44,7 @@ </div> </div> <div class="card-body"> - <FutureRiskGraph :evaluation="evaluation" /> + <FutureRiskGraph :evaluation="evaluation"/> </div> </div> </div>