javascript - React Apex Line Chart Multiple Series

Question

I am currently using Apex Line Chart to generate 6 series. The issue I am running into is that there are 3 pairs that share a y-axis title and ticks with its partner. If I display 2 series and they are partners their title and ticks display twice on the y axis. The only viable solution that I can think to implement is to have only one of each partner have a display on always, but ideally i want to hide the y axis when the partners aren't selected and display when they are selected. If anyone can help with the latter solution I would be very grateful

  const options = {
    chart: {
      id: 'lineChart',
      background: theme.palette.background.paper,
    },
    colors: [blue, yellow, green, red, pink, neonGreen],
    height: '500px',
    markers: {
      size: 5,
    },
    series: [
      {
        name: 'Whopper fat',
        data: whopperFatSeriesData,
      },
      {
        name: 'Whopper Calories',
        data: whopperCaloriesSeriesData,
      },
      {
        name: 'Whopper Cost',
        data: whopperCostSeriesData,
      },
      {
        name: 'McDouble fat',
        data: mcDoubleFatSeriesData,
      },
      {
        name: 'McDouble Calories',
        data: mcDoubleCaloriesSeriesData,
      },
      {
        name: 'McDouble Cost',
        data: mcDoubleCostSeriesData,
      },
    ],
    stroke: {
      width: 2,
    },
    theme: {
      mode: theme.palette.type,
    },
    tooltip: {
      shared: true,
      custom: function ({ dataPointIndex }: { dataPointIndex: number }) {
        return renderToStaticMarkup(
          <CustomTooltip data={whopperFatSeriesData} dataPointIndex={dataPointIndex}></CustomTooltip>,
        )
      },
    },
    title: {
      text: 'Cloud Usage',
      offsetY: -8,
      style: {
        fontSize: '24px',
      },
    },
    xaxis: {
      type: 'datetime',
      title: {
        text: '',
        offsetY: 8,
        style: {
          fontSize: '15px',
        },
      },
      labels: {
        formatter: function (value: any, timestamp: any, index: any) {
          return moment.utc(timestamp).format('DD-MMM-YY')
        },
      },
    },
    yaxis: [
      {
        max: getMaxCalories,
        seriesName: 'Whopper Fat',
        title: {
          text: 'Whopper Fat (g)',
          offsetX: -8,
          style: {
            fontSize: '15px',
          },
        },
        decimalsInFloat: 3,
      },
      {
        title: {
          text: 'Whopper Calories (kc)',
          opposite: -8,
          style: {
            fontSize: '15px',
            color: yellow,
          },
        },
        decimalsInFloat: 2,
        opposite: true,
        axisBorder: {
          show: true,
          color: yellow,
        },
        axisTicks: {
          show: true,
        },
        showAlways: false,
      },
      {
        title: {
          text: 'Cost ($)',
          offsetX: -8,
          style: {
            fontSize: '15px',
            color: green,
          },
        },
        decimalsInFloat: 2,
        opposite: true,
        axisBorder: {
          show: true,
          color: green,
        },
        axisTicks: {
          show: true,
        },
        showAlways: false,
      },
      {
        max: getMaxCalories,
        title: {
          text: 'McDouble fat (g)',
          offsetX: -8,
          style: {
            fontSize: '15px',
          },
          show: false,
        },
        decimalsInFloat: 3,
        show: false,
      },
      {
        title: {
          text: 'McDouble Calories (kc)',
          opposite: -8,
          style: {
            fontSize: '15px',
            color: yellow,
          },
        },
        decimalsInFloat: 2,
        opposite: true,
        axisBorder: {
          show: true,
          color: yellow,
        },
        axisTicks: {
          show: true,
        },
        showAlways: false,
      },
      {
        title: {
          text: 'Cost ($)',
          offsetX: -8,
          style: {
            fontSize: '15px',
            color: green,
          },
        },
        decimalsInFloat: 2,
        opposite: true,
        axisBorder: {
          show: true,
          color: green,
        },
        axisTicks: {
          show: true,
        },
        showAlways: false,
      },
    ],
  }

Image of Chart

标签： javascriptreactjsapexcharts