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

Share Improve this question Follow edited Mar 28 at 20:30 Olivier Tassinari 8,69166 gold badges2525 silver badges2828 bronze badges asked Mar 27 at 10:52 user3292323user3292323 16111 gold badge33 silver badges88 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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