Support y-axis position setup for different series of VueUiXy

[jimnxj]

I have two series in my query and I’d like to be able to plot them on separate Y axes (but on the same chart),
is it possible to support position setup for different series of VueUiXy, position value would be 'left' / 'right'?

[graphieros]

Hi @jimnxj

VueUiXy already supports multiple y axes.

However, multiple y axes are shown on the same side (it was a choice I made, since this can be used for more than 2 series, and I don't like the fact of having to look on the right, on the left, tilt the head to read axis labels rotated inversely and so on; so it will stay this way):

However, your issue reminded me I needed to add the option to display prefix or suffix for individual series, so as to display them correctly both on the yAxis and on series data labels. To use this new feature, you'll need to upgrade to v2.3.85.

Here is a sample component you can copy paste to have this rendering:

<script setup>
import { ref } from "vue";
import { VueUiXy } from "vue-data-ui";
import "vue-data-ui/style.css";

const config = ref({
  theme: "",
  responsive: false,
  customPalette: [],
  useCssAnimation: true,
  chart: {
    fontFamily: "inherit",
    backgroundColor: "#FFFFFFff",
    color: "#1A1A1Aff",
    height: 600,
    width: 1000,
    zoom: {
      show: true,
      color: "#CCCCCCff",
      highlightColor: "#4A4A4A",
      fontSize: 14,
      useResetSlot: false,
      minimap: {
        show: true,
        smooth: false,
        selectedColor: "#1F77B4",
        selectedColorOpacity: 0.2,
        lineColor: "#1A1A1A",
        selectionRadius: 2,
        indicatorColor: "#1A1A1A",
      },
    },
    padding: {
      top: 36,
      right: 24,
      bottom: 48,
      left: 48,
    },
    highlighter: {
      color: "#1A1A1Aff",
      opacity: 5,
      useLine: false,
      lineDasharray: 2,
      lineWidth: 1,
    },
    highlightArea: {
      show: false,
      from: 0,
      to: 0,
      color: "#1A1A1Aff",
      opacity: 20,
      caption: {
        text: "Caption",
        fontSize: 20,
        color: "#1A1A1Aff",
        bold: false,
        offsetY: 0,
        width: "auto",
        padding: 3,
        textAlign: "center",
      },
    },
    timeTag: {
      show: false,
      backgroundColor: "#e1e5e8ff",
      color: "#1A1A1Aff",
      fontSize: 12,
      circleMarker: {
        radius: 3,
        color: "#1A1A1Aff",
      },
    },
    grid: {
      stroke: "#e1e5e8ff",
      showVerticalLines: false,
      showHorizontalLines: false,
      position: "middle",
      frame: {
        show: false,
        stroke: "#E1E5E8ff",
        strokeWidth: 2,
        strokeLinecap: "round",
        strokeLinejoin: "round",
        strokeDasharray: 0,
      },
      labels: {
        show: true,
        color: "#1A1A1Aff",
        fontSize: 15,
        axis: {
          yLabel: "",
          yLabelOffsetX: 3,
          xLabel: "",
          xLabelOffsetY: 14,
          fontSize: 12,
        },
        zeroLine: {
          show: true,
        },
        xAxis: {
          showBaseline: true,
        },
        yAxis: {
          showBaseline: true,
          commonScaleSteps: 10,
          useIndividualScale: true,
          stacked: false,
          gap: 12,
          labelWidth: 45,
          scaleMin: null,
          scaleMax: null,
        },
        xAxisLabels: {
          color: "#1A1A1Aff",
          show: true,
          values: [
            "T1",
            "T2",
            "T3",
            "T4",
            "T5",
            "T6",
            "T7",
            "T8",
            "T9",
            "T10",
            "T11",
            "T12",
          ],
          fontSize: 18,
          showOnlyFirstAndLast: false,
          showOnlyAtModulo: false,
          modulo: 12,
          yOffset: 8,
          rotation: 0,
        },
      },
    },
    comments: {
      show: true,
      showInTooltip: true,
      width: 200,
      offsetX: 0,
      offsetY: 0,
    },
    labels: {
      fontSize: 10,
      prefix: "",
      suffix: "",
    },
    legend: {
      color: "#1A1A1Aff",
      show: true,
      fontSize: 16,
    },
    title: {
      text: "Title",
      color: "#1A1A1Aff",
      fontSize: 20,
      bold: true,
      textAlign: "center",
      paddingLeft: 0,
      paddingRight: 0,
      subtitle: {
        color: "#CCCCCCff",
        text: "",
        fontSize: 16,
        bold: false,
      },
      show: true,
    },
    tooltip: {
      show: true,
      color: "#1A1A1Aff",
      backgroundColor: "#FFFFFFff",
      fontSize: 14,
      customFormat: null,
      borderRadius: 4,
      borderColor: "#e1e5e8",
      borderWidth: 1,
      backgroundOpacity: 100,
      position: "center",
      offsetY: 24,
      showValue: true,
      showPercentage: false,
      roundingValue: 0,
      roundingPercentage: 0,
    },
    userOptions: {
      show: true,
      buttons: {
        tooltip: true,
        pdf: true,
        csv: true,
        img: true,
        table: true,
        labels: true,
        fullscreen: true,
        sort: false,
        stack: true,
        animation: false,
      },
      buttonTitles: {
        open: "Open options",
        close: "Close options",
        tooltip: "Toggle tooltip",
        pdf: "Download PDF",
        csv: "Download CSV",
        img: "Download PNG",
        table: "Toggle table",
        labels: "Toggle labels",
        fullscreen: "Toggle fullscreen",
        stack: "Toggle stack mode",
      },
    },
  },
  bar: {
    borderRadius: 2,
    useGradient: true,
    periodGap: 0.1,
    border: {
      useSerieColor: false,
      strokeWidth: 1,
      stroke: "#FFFFFFff",
    },
    labels: {
      show: true,
      offsetY: -8,
      rounding: 0,
      color: "#1A1A1Aff",
      formatter: null,
    },
    serieName: {
      show: false,
      offsetY: -6,
      useAbbreviation: true,
      abbreviationSize: 3,
      useSerieColor: true,
      color: "#1A1A1Aff",
      bold: false,
    },
  },
  line: {
    radius: 6,
    useGradient: true,
    strokeWidth: 2,
    labels: {
      show: true,
      offsetY: -8,
      rounding: 0,
      color: "#1A1A1Aff",
      formatter: null,
    },
    area: {
      useGradient: true,
      opacity: 20,
    },
  },
  plot: {
    radius: 6,
    useGradient: true,
    labels: {
      show: true,
      offsetY: -8,
      rounding: 0,
      color: "#1A1A1Aff",
      formatter: null,
    },
  },
  table: {
    responsiveBreakpoint: 400,
    rounding: 0,
    sparkline: true,
    columnNames: {
      period: "Period",
      total: "Total",
    },
    th: {
      backgroundColor: "#FAFAFAff",
      color: "#1A1A1Aff",
      outline: "",
    },
    td: {
      backgroundColor: "#FAFAFAff",
      color: "#1A1A1Aff",
      outline: "",
    },
  },
  showTable: false,
});

const dataset = ref([
  {
    name: "name",
    series: [90, 85, 92, 94, 96, 95, 92, 91, 90, 92, 94, 92],
    color: "#6376DD",
    type: "line",
    shape: "circle",
    useArea: false,
    useProgression: false,
    dataLabels: true,
    smooth: false,
    dashed: false,
    useTag: "none",
    scaleMin: 0,
    scaleMax: 100,
    prefix: '',
    suffix: '%' // Displayed both on y axis labels and series labels
  },
  {
    name: "name",
    series: [50, 45, 62, 64, 44, 50, 50, 80, 65, 50, 45, 32],
    color: "#42d392",
    type: "bar",
    shape: "circle",
    useArea: false,
    useProgression: false,
    dataLabels: true,
    smooth: false,
    dashed: false,
    useTag: "none",
    scaleMin: 0,
    scaleMax: 100,
    prefix: '',
    suffix: ''
  },
]);
</script>

<template>
  <div style="width: 600px">
    <VueUiXy :config="config" :dataset="dataset" />
  </div>
</template>