There was a problem with setting the min chart parameter on version 12 of Angular and version 1.7.7 of lib.

Hello, I have a problem with setting the "min" parameter of the chart on angular 12 and lib 1.7.7.

The problem is that when we add the "min" parameter to the chart settings, the values in the chart are indented, which affects their accuracy. Even when we turn off datetimeUTC: false, the chart becomes more accurate, but not as expected.

But for some reason, when I took the data from the test chart to my integrated chart, the data was correctly positioned in its time positions.

Test chart (It works as it should).

Another possible problem was that I created the values for the chart in this way:

data.push({
            x: name,
            y: [new Date(startDate).setHours(0, 0, 0, 0),
              new Date(endDate).setHours(23, 59, 59, 999)],
            fillColor: value1,
            meta: {
              state: value2,
              group: value3,
              value: value4,
              dateRange: value5,
            }
          });

It looks like a similar structure to the test data, but for some reason it conflicts with the "min" parameter of the chart.

So far, we have bypassed the "min" parameter by creating a value for the date from which the chart should be displayed:

data.push({
          x: name,
          y: [tentativelyStart, tentativelyEnd],
          meta: {}
        }

Here is the option that is currently working.

    this.chartOptions = {
      chart: {
        animations: {
          enabled: true,
        },
        height: 300,
        type: "rangeBar",
        redrawOnWindowResize: false,
        selection: {
          enabled: true,
        },
        toolbar: {
          show: false,
        },
        zoom: {
          enabled: false,
        },
        stackType: '100%',
        events: {}
      },
      tooltip: {
        enabled: false,
      },
      grid: {
        show: true,
        borderColor: "#E3ECF3",
        position: "back",
        xaxis: {
          lines: {
            show: true,
          },
        },
      },
      states: {
        active: {
          filter: {
            type: "none",
          },
        },
        hover: {
          filter: {
            type: "none",
          },
        },
      },
      plotOptions: {
        bar: {
          horizontal: true,
          rangeBarGroupRows: true,
          distributed: true,
          borderRadius: 4,
          barHeight: "60%",
          dataLabels: {
            position: "center",
          },
        },
      },
      legend: {
        show: true,
        markers: {
          width: 12,
          height: 12,
          strokeWidth: 0,
          strokeColor: '#fff',
          fillColors: ['#5C86F2', '#FED035', '#BB6BD9', '#23D752', '#E63241', '#1DBCC3', '#C5C7DA', '#FFFFFF'],
          radius: 12,
          customHTML: undefined,
          onClick: undefined,
          offsetX: 0,
          offsetY: 0
        },
      },
      xaxis: {
        type: "datetime",
        position: "top",
        tickPlacement: 'on',
        labels: {
          show: true,
          showDuplicates: false,
          datetimeFormatter: {
            month: "MMMM"
          },
          datetimeUTC: false,
        },
        axisTicks: {
          show: false,
        },
        axisBorder: {
          show: false,
        },
        max: new Date(this.endDate).setHours(23, 59, 59, 999),
        min: undefined,
      },
      annotations: {
        xaxis: [
          {
            x: new Date(Date.now()).getTime(),
            borderColor: "#775DD0",
            label: {
              style: {
                color: "grey",
              },
            },
          },
        ],
      },
      series: [],
    };
  }
}

apexcharts / ng-apexcharts