diff --git a/src/lib/components/RetailVolume.svelte b/src/lib/components/RetailVolume.svelte
index 2d7dba68..31e5d95a 100644
--- a/src/lib/components/RetailVolume.svelte
+++ b/src/lib/components/RetailVolume.svelte
@@ -70,7 +70,7 @@ function getPlotOptions() {
animation: $screenWidth < 640 ? false: true,
grid: {
left: $screenWidth < 640 ? '0%' : '2%',
- right: $screenWidth < 640 ? '5%' : '2%',
+ right: $screenWidth < 640 ? '0%' : '2%',
bottom: $screenWidth < 640 ? '0%' : '2%',
containLabel: true
},
@@ -90,25 +90,44 @@ function getPlotOptions() {
}
},
yAxis: [
- {
- type: 'value',
- splitLine: {
+ {
+ name: 'Volume',
+ position: 'left',
+ type: 'value',
+ splitLine: {
show: false, // Disable x-axis grid lines
- },
- axisLabel: {
+ },
+ axisLabel: {
color: '#6E7079', // Change label color to white
- formatter: function (value) {
- value = Math.max(value, 0);
- return '$'+(value / denominator)?.toFixed(1) + unit; // Format value in millions
- },
- },
+ formatter: function (value, index) {
+ // Display every second tick
+ if (index % 2 === 0) {
+ value = Math.max(value, 0);
+ return '$' + (value / denominator)?.toFixed(1) + unit; // Format value in millions
+ } else {
+ return ''; // Hide this tick
+ }
+ }
},
- {
- type: 'value',
- show: false,
- },
-
- ],
+ },
+ {
+ type: 'value',
+ splitLine: {
+ show: false, // Disable x-axis grid lines
+ },
+ name: 'Sentiment',
+ position: 'right',
+ axisLabel: {
+ formatter: function (value, index) {
+ if (index % 2 === 0) {
+ return value.toFixed(2); // Format the sentiment value
+ } else {
+ return ''; // Hide this tick
+ }
+ }
+ }
+ }
+ ],
series: [
{
data: tradingList,
@@ -122,7 +141,6 @@ function getPlotOptions() {
name: 'Sentiment',
data: sentimentList,
type: 'bar',
- smooth: true,
yAxisIndex: 1,
itemStyle: {
color: (params) => {
@@ -130,6 +148,7 @@ function getPlotOptions() {
return params.data >= 0 ? '#10DB06' : '#FF2F1F';
},
},
+
},
]
};
@@ -199,7 +218,7 @@ $: {