I'm trying to create a chart with goals for some months, but in last month the blue goal does not appear and it exists (you can see in the second image). Why is it happening? How can I fix this?

The red and blue data format is this:

[{
    "x":"label",
    "y":numericValue,
    "goals":[{
        "name":"goalLabel",
        "value":goalValue,
        "strokeHeight":5,
        "strokeColor":"rgb(255, 25, 86)"
    }]
}]

And the code to create the chart is this:

<Chart
        height={350}
        options={{
          chart: {
            toolbar: { show: false },
            zoom: { enabled: false }
          },
          legend: { show: true },
          stroke: { show: true, width: 2 },
          xaxis: {
            type: 'category'
          },
          yaxis: [
            {
              axisTicks: {
                show: true
              },
              labels: {
                formatter: (value: number) => {
                  if (value >= 1000000) return (value / 1000000).toFixed(0) + 'M';
                  if (value >= 1000) return (value / 1000).toFixed(0) + 'K';
                  return value.toFixed(0);
                }
              },
              seriesName: [strings('dashboard.cash'), strings('dashboard.ca')],
            },
            {
              opposite: true,
              labels: {
                formatter: (value: number) => {
                  if (value >= 1000000) return (value / 1000000).toFixed(0) + 'M';
                  if (value >= 1000) return (value / 1000).toFixed(0) + 'K';
                  return value.toFixed(0);
                },
              },
              seriesName: strings('dashboard.arpa'),
            }
          ],
          tooltip: {
            y: {
              formatter: (value: number) =>
                new Intl.NumberFormat(locale, { style: 'currency', currency: currency }).format(value),
            },
          },
        }}
        series={[
          { name: strings('dashboard.cash'), data: cash, type: 'bar', color: 'rgba(215, 66, 106,1)' },
          { name: strings('dashboard.ca'), data: sales, type: 'bar', color: 'rgba(115, 112, 255,1)' },
          { name: strings('dashboard.arpa'), data: arpa, type: 'line', color: 'rgba(238, 204, 0,1)' }
        ]}
        type='line'
        width="100%"
      />

Where chart is:

import dynamic from 'next/dynamic';
import { styled } from '@mui/material/styles';

const ApexChart = dynamic(() => import('react-apexcharts'), { ssr: false, loading: () => null });

export const Chart = styled(ApexChart)``;

I'm trying to create a chart with goals for some months, but in last month the blue goal does not appear and it exists (you can see in the second image). Why is it happening? How can I fix this?

The red and blue data format is this:

[{
    "x":"label",
    "y":numericValue,
    "goals":[{
        "name":"goalLabel",
        "value":goalValue,
        "strokeHeight":5,
        "strokeColor":"rgb(255, 25, 86)"
    }]
}]

And the code to create the chart is this:

<Chart
        height={350}
        options={{
          chart: {
            toolbar: { show: false },
            zoom: { enabled: false }
          },
          legend: { show: true },
          stroke: { show: true, width: 2 },
          xaxis: {
            type: 'category'
          },
          yaxis: [
            {
              axisTicks: {
                show: true
              },
              labels: {
                formatter: (value: number) => {
                  if (value >= 1000000) return (value / 1000000).toFixed(0) + 'M';
                  if (value >= 1000) return (value / 1000).toFixed(0) + 'K';
                  return value.toFixed(0);
                }
              },
              seriesName: [strings('dashboard.cash'), strings('dashboard.ca')],
            },
            {
              opposite: true,
              labels: {
                formatter: (value: number) => {
                  if (value >= 1000000) return (value / 1000000).toFixed(0) + 'M';
                  if (value >= 1000) return (value / 1000).toFixed(0) + 'K';
                  return value.toFixed(0);
                },
              },
              seriesName: strings('dashboard.arpa'),
            }
          ],
          tooltip: {
            y: {
              formatter: (value: number) =>
                new Intl.NumberFormat(locale, { style: 'currency', currency: currency }).format(value),
            },
          },
        }}
        series={[
          { name: strings('dashboard.cash'), data: cash, type: 'bar', color: 'rgba(215, 66, 106,1)' },
          { name: strings('dashboard.ca'), data: sales, type: 'bar', color: 'rgba(115, 112, 255,1)' },
          { name: strings('dashboard.arpa'), data: arpa, type: 'line', color: 'rgba(238, 204, 0,1)' }
        ]}
        type='line'
        width="100%"
      />

Where chart is:

import dynamic from 'next/dynamic';
import { styled } from '@mui/material/styles';

const ApexChart = dynamic(() => import('react-apexcharts'), { ssr: false, loading: () => null });

export const Chart = styled(ApexChart)``;

• material-ui
• apexcharts

1 Answer 1

I've solved by changing chart type line, to bar. In line mode the center is the value point, and in the bar mode, there is a range in each value