HideOverlappingLabels в ApexCharts для категории типа xAxis

Question

У меня есть это определение apexcharts, и когда у меня больше, например, 300 образцов данных для моей серии, вещи перекрываются на xAxis, как это

i would rather see something like this though

введите описание изображения здесь

Параметр "hideOverlapLabels" не работает, поскольку он работает только с таймсериями из того, что я прочитал.

Я знаю, что могу уменьшить количество тиков, но я хочу, чтобы диаграмма была масштабируемый и все данные в нем. Есть ли способ предотвратить перекрытие этикеток?

 var options_apex = {
                    series: null,
                    colors: [ '#0054ff', '#FF0000' ,'#FF0000'],
                    chart: {
                        height: 450,
                        type: 'line',
                        zoom: {
                            enabled: true
                        },
                        animations: {
                            enabled: false
                        }
                    },
                    stroke: {
                        width: [3, 3, 3],
                        curve: 'straight'
                    },
                    labels: null,

                    title: {
                        text: "Serial Data",
                        align: 'center',
                        margin: 10,
                        offsetX: 0,
                        offsetY: 0,
                        floating: false,
                        style: {
                            fontSize: '14px',
                            fontWeight: 'bold',
                            fontFamily: undefined,
                            color: '#263238'
                        },
                    },
                    subtitle: {
                        text: "the reckoning",
                        align: 'center',
                        margin: 10,
                        offsetX: 0,
                        offsetY: 20,
                        floating: true,
                        style: {
                            fontSize: '12px',
                            fontWeight: 'normal',
                            fontFamily: undefined,
                            color: '#9699a2'
                        },
                    },

                    xaxis: {
                        type:"category",
                        labels: {
                            rotate: -90,
                            rotateAlways: true,
                            hideOverlappingLabels: true,
                            style: {
                                colors: [],
                                fontSize: '7px',
                                fontFamily: 'Roboto',
                                fontWeight: 100,
                                cssClass: 'apexcharts-xaxis-label',
                            }

                        },
                        axisTicks: {
                            show: true,
                            borderType: 'solid',
                            color: '#78909C',
                            height: 6,
                            offsetX: 0,
                            offsetY: 0
                        },

                        tickAmount: undefined,
                        title: {
                            text: "STEP ID",
                            offsetX: 0,
                            offsetY: 0,
                            style: {
                                color: "#0000ff",
                                fontSize: '12px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                                fontWeight: 600,
                                cssClass: 'apexcharts-xaxis-title',
                            },
                        }
                    },
                };

Answer 1

Думаю, я нашел решение

  xaxis: {
                        type:"category",
                        tooltip: {
                            enabled: false,
                            formatter: undefined,
                            offsetY: 0,
                            style: {
                                fontSize: 0,
                                fontFamily: 0,
                            },
                        },
                        labels: {
                            rotate: -45,
                            rotateAlways: true,
                            hideOverlappingLabels: true,
                            style: {
                                colors: [],
                                fontSize: '6px',
                                fontFamily: 'Roboto',
                                fontWeight: 80,
                                //cssClass: 'apexcharts-xaxis-label',
                            },
                            axisTicks: {
                                show: true,
                                borderType: 'solid',
                                color: '#78909C',
                                height: 6,
                                offsetX: 0,
                                offsetY: 0
                            },

                        },

С этой настройкой и установкой не меток, а категорий с

options_apex.xaxis.categories = label;

вещи похоже, работают без перекрытия.