range bar: probleme with X axis

[RedBoardDev]

Hello,

I'm using apexcharts.js with react-apexcharts.

How you can see on this image, I've category on Y axis, and datetime on X axis. My problem is that datetime are wrong. I dont understand why, but some date are visible and not in the correct order. Every date with ' like Sep '23...
Here is my function to create the data series
`function transformDataToSeries(data) {
const courseNames = Object.keys(data);

let series = [];

courseNames.forEach(courseName => {
    let courseData = data[courseName];

    courseData.forEach(project => {
        let projectIndex = series.findIndex(serie => serie.name === project.title);

        if (projectIndex === -1) {
            series.push({
                name: project.title,
                data: [{ x: courseName, y: [new Date(project.begin).getTime(), new Date(project.end).getTime()] }]
            });
        } else {
            series[projectIndex].data.push({ x: courseName, y: [new Date(project.begin).getTime(), new Date(project.end).getTime()] });
        }
    });
});
return series;

}`

And here my chart configuration and component:
`const defaultOptions = {
colors: ['#FFA500', '#FF6347', '#228B22', '#9370DB', '#4B0082'],
chart: {
height: '100%',
type: 'rangeBar',
zoom: {
enabled: false,
},
toolbar: {
show: false,
},
animations: {
enabled: true,
easing: 'easeinout',
speed: 600,
},
},
plotOptions: {
bar: {
horizontal: true,
borderRadius: 1,
barHeight: '16%',
rangeBarGroupRows: true,
}
},
yaxis: {
type: 'category'
},
xaxis: {
type: 'datetime',
},
fill: {
type: 'solid',
opacity: 0.9
},
legend: {
show: false
},
grid: {
borderColor: '#C2C2C2',
strokeDashArray: 2,
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: true
}
}
},
annotations: {
xaxis: [
{
x: new Date().getTime(),
strokeDashArray: 0,
borderColor: "#1c325c",
opacity: 0.6,
label: {
borderColor: "#1c325c",
style: {
color: "#fff",
background: "#1c325c"
},
text: "Today"
}
},
],
},
};

function ChartComponent({ data = {}, fullscreen = false }) {
const options = defaultOptions;

return (
    <div style={{
        height: '100%',
        width: '100%',
    }}>
        <Chart
            type="rangeBar"
            height={'100%'}
            width={'100%'}
            options={options}
            series={data}
        />
    </div>
);

}

export default ChartComponent;
`

How can I show correct date for my timeline chart ?

[rosco54]

The label Sep '23 is indicating the start of the month in the year 2023, then followed by 15 Sep, which is the 15th of September. Yes, the default format is very confusing but you can change it:

https://apexcharts.com/docs/datetime/

[RedBoardDev]

Oh okay I was so confused... Can I just show the indicatif of the month in the year ?
I think that is too much. Also if I can have a bar who follow my cursor when I'm on the timeline which show me the date, it can be nice. But I don't know if I can

[rosco54]

You can set up crosshairs to do that.

…

On Tue, 2 Apr 2024, 6:20 pm Thomas Ott, ***@***.***> wrote: Oh okay I was so confused... Can I just show the indicatif of the month in the year ? I think that is too much. Also if I can have a bar who follow my cursor when I'm on the timeline which show me the date, it can be nice. But I don't know if I can — Reply to this email directly, view it on GitHub <#4375 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BGBUF45IXMSCJWD7EMGX2DTY3JL45AVCNFSM6AAAAABFSK7KA6VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DSOBQGE2TA> . You are receiving this because you commented.Message ID: ***@***.*** com>

[RedBoardDev]

Here what I've when I try to use crosshairs. The line is visible when I've my cursor is on a box, and not everytime. And stay at the same point...
For the date, I've something near to what I wanted. Good for the moment, if I can have a bar who follow my cursor for the date