diff --git a/src/components/charts/CandleChart.vue b/src/components/charts/CandleChart.vue index 955739ee..5999ae30 100644 --- a/src/components/charts/CandleChart.vue +++ b/src/components/charts/CandleChart.vue @@ -80,11 +80,13 @@ const props = defineProps<{ sliderPosition: ChartSliderPosition | undefined; colorUp: string; colorDown: string; + labelSide: 'left' | 'right'; }>(); +const isLabelLeft = computed(() => props.labelSide === 'left'); // Chart default options -const MARGINLEFT = '5.5%'; -const MARGINRIGHT = '1%'; +const MARGINLEFT = isLabelLeft.value ? '5.5%' : '1%'; +const MARGINRIGHT = isLabelLeft.value ? '1%' : '5.5%'; const NAMEGAP = 55; const SUBPLOTHEIGHT = 8; // Value in % @@ -387,6 +389,7 @@ function updateChart(initial = false) { scale: true, gridIndex: currGridIdx, name: key, + position: props.labelSide, nameLocation: 'middle', nameGap: NAMEGAP, axisLabel: { show: true }, @@ -590,6 +593,7 @@ function initializeChartOptions() { min: (value) => { return value.min - (value.max - value.min) * 0.04; }, + position: props.labelSide, }, { scale: true, @@ -597,7 +601,7 @@ function initializeChartOptions() { splitNumber: 2, name: 'volume', nameLocation: 'middle', - // position: 'right', + position: props.labelSide, nameGap: NAMEGAP, axisLabel: { show: false }, axisLine: { show: false }, diff --git a/src/components/charts/CandleChartContainer.vue b/src/components/charts/CandleChartContainer.vue index 59c0350b..7d2a6713 100644 --- a/src/components/charts/CandleChartContainer.vue +++ b/src/components/charts/CandleChartContainer.vue @@ -73,8 +73,8 @@ :slider-position="sliderPosition" :color-up="colorStore.colorUp" :color-down="colorStore.colorDown" - > - + :label-side="settingsStore.chartLabelSide" + />