Show two vertical profiles next to each other

src/components/charts/ElevationChart.vue

@@ -119,14 +119,17 @@ onMounted(() => {
     ],
     margin: {
       top: 110,
-      left: 50,
-      right: 50,
+      left: 70,
+      right: 30,
+      bottom: 50,
     },
   }
 
   const chartWidth = 800
   const chartHeight = 1200
 
+  setChartConfigValues(axisOptions)
+
   if (chartContainer.value) {
     axis = new CartesianAxes(
       chartContainer.value,
@@ -140,11 +143,24 @@ onMounted(() => {
     axis.accept(zoom)
     axis.accept(mouseOver)
     resize()
-    if (props.config !== undefined) refreshChart()
+    if (props.config !== undefined) {
+      refreshChart()
+      setTags()
+    }
     window.addEventListener('resize', resize)
   }
 })
 
+const setChartConfigValues = (axisOptions: CartesianAxesOptions) => {
+  props.config.yAxis?.forEach((axis, i) => {
+    axisOptions.y[i].type = axis.type
+  })
+
+  props.config.xAxis?.forEach((axis, i) => {
+    axisOptions.x[i].type = axis.type
+  })
+}
+
 const addToChart = (chartSeries: ChartSeries) => {
   const id = chartSeries.id
   const seriesData = props.series[chartSeries.dataResources[0]]

src/components/spatialdisplay/SpatialDisplay.vue

@@ -142,7 +142,7 @@ onMounted(() => {
 })
 
 const hideMap = computed(() => {
-  return mobile.value && props.locationId
+  return mobile.value && (props.locationId || props.latitude || props.longitude)
 })
 
 function onLocationChange(locationId: string | null): void {

src/components/timeseries/TimeSeriesComponent.vue

@@ -31,14 +31,15 @@
     </v-window-item>
     <v-window-item
       :value="DisplayType.ElevationChart"
-      class="time-series-component__container scroll"
+      class="elevation-chart-component__container scroll"
     >
       <KeepAlive>
         <ElevationChart
           v-for="(subplot, i) in elevationChartSubplots"
           :config="subplot"
           :series="elevationChartSeries"
           :key="`${subplot.title}-${i}`"
+          :style="`min-width: ${xs ? 100 : 50}%`"
         >
         </ElevationChart>
       </KeepAlive>
@@ -64,6 +65,7 @@ import type { UseTimeSeriesOptions } from '../../services/useTimeSeries/index.ts
 import { configManager } from '../../services/application-config'
 import { useSystemTimeStore } from '@/stores/systemTime'
 import type { TimeSeriesEvent } from '@deltares/fews-pi-requests'
+import { useDisplay } from 'vuetify'
 
 interface Props {
   config?: DisplayConfig
@@ -98,6 +100,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const store = useSystemTimeStore()
 const lastUpdated = ref<Date>(new Date())
+const { xs } = useDisplay()
 
 const options = computed<UseTimeSeriesOptions>(() => {
   return {
@@ -174,6 +177,13 @@ watch(
   flex-direction: column;
 }
 
+.elevation-chart-component__container {
+  display: flex;
+  flex: 1 1 100%;
+  flex-direction: row;
+  overflow-x: auto;
+}
+
 .scroll {
   overflow-y: auto;
 }

src/lib/charts/timeSeriesDisplayToChartConfig.ts

@@ -98,8 +98,15 @@ function xAxisFromPlotItemXAxis(
   const axes = []
   const includeZero =
     xAxis.axisMinValue === 0 && xAxis.axisMaxValue === undefined
+
+  // TODO: xAxis.axisType should instead be set in xAxis: TimeSeriesDisplaySubplotItemAxis
+  const isDegrees =
+    xAxis.axisLabel?.includes('degrees') &&
+    xAxis.axisMinValue === 0 &&
+    xAxis.axisMaxValue === 360
+
   const axis: AxisOptions = {
-    type: AxisType.value,
+    type: isDegrees ? AxisType.degrees : AxisType.value,
     label: xAxis.axisLabel,
     includeZero,
   }