I have this line chart which has data displayed on both Y axes and obviously the X axis. The chart looks fine but I am unable to display the data properly with relation to X axis. I have multiple problems so please bear with me.
Problem 1:
Suppose I have data starting from 27th July and ends up until 19th August. The data could be in any hour of each day in the actual chart but for simplicity's sake I put data in one specific hour of each day. If the chart is zoomed in, the data doesn't show in those specific hours. I can only see data based on each day. How can I view the data based on the version of the zoom position? I mean if I zoom into hourly view, I want to see the data for each hour. But if I zoom out to daily view, I should only see the data for each day. How can I do it?
Problem 2:
Right now the X axis shows all the dates as its labels. How can I show only the last 9 days plus current day of labels and the line chart should be for that part only? I tried this by using min & max but that moves the labels away from the ticks and also exceeds the charts.
Problem 3:
Another problem with the current chart is, my data starts from 27th July, but it shows that it starts from 26th July. On the other hand, 1st Aug is missing from the chart. That is weird right?
Here's the snippet:
const lineChartEl = document.querySelector('#line-chart');
const lineChartOptions = {
chart: {
height: '380',
width: "100%",
type: "line",
zoom: {
type: 'x',
enabled: true,
autoScaleYaxis: true
},
dropShadow: {
enabled: true,
enabledOnSeries: undefined,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.35
},
toolbar: {
show: true,
offsetX: -30,
offsetY: 0,
tools: {
download: false,
selection: true,
zoom: true,
zoomin: true,
zoomout: true,
pan: true,
reset: true | '<img src="/static/icons/reset.png" width="20">',
customIcons: []
}
},
autoSelected: 'zoom'
},
legend: {
position: 'top'
},
grid: {
show: true,
borderColor: "rgba(0,0,0,0.1)"
},
stroke: {
width: 2,
},
tooltip: {
theme: "dark",
},
series: [{
name: "Revenue",
data: [
["2021-07-27 00:00:00", 200],
["2021-07-28 01:00:00", 152],
["2021-07-29 02:00:00", 400],
["2021-07-30 03:00:00", 1060],
["2021-07-31 04:00:00", 1400],
["2021-08-01 05:00:00", 1240],
["2021-08-02 06:00:00", 1680],
["2021-08-03 07:00:00", 1103],
["2021-08-04 08:00:00", 2063],
["2021-08-05 09:00:00", 2300],
["2021-08-06 10:00:00", 2506],
["2021-08-07 11:00:00", 2750],
["2021-08-08 12:00:00", 2639],
["2021-08-09 13:00:00", 2927],
["2021-08-10 14:00:00", 2106],
["2021-08-11 15:00:00", 3015],
["2021-08-12 16:00:00", 3378],
["2021-08-13 17:00:00", 3615],
["2021-08-14 18:00:00", 3832],
["2021-08-15 19:00:00", 3521],
["2021-08-16 20:00:00", 3185],
["2021-08-17 21:00:00", 3748],
["2021-08-18 22:00:00", 3900]
]
},
{
name: "Cost",
data: [
["2021-07-27 00:00:00", 0],
["2021-07-28 01:00:00", 142],
["2021-07-29 02:00:00", 412],
["2021-07-30 03:00:00", 214],
["2021-07-31 04:00:00", 342],
["2021-08-01 05:00:00", 205],
["2021-08-02 06:00:00", 174],
["2021-08-03 07:00:00", 316],
["2021-08-04 08:00:00", 593],
["2021-08-05 09:00:00", 704],
["2021-08-06 10:00:00", 1012],
["2021-08-07 11:00:00", 1274],
["2021-08-08 12:00:00", 1329],
["2021-08-09 13:00:00", 1484],
["2021-08-10 14:00:00", 1804],
["2021-08-11 15:00:00", 1572],
["2021-08-12 16:00:00", 1638],
["2021-08-13 17:00:00", 1307],
["2021-08-14 18:00:00", 1834],
["2021-08-15 19:00:00", 1983],
["2021-08-16 20:00:00", 2028],
["2021-08-17 21:00:00", 1756],
["2021-08-18 22:00:00", 1368]
]
},
{
name: "Profit",
data: [
["2021-07-27 00:00:00", 0.5],
["2021-07-28 01:00:00", 1.2],
["2021-07-29 02:00:00", 1.8],
["2021-07-30 03:00:00", 2.2],
["2021-07-31 04:00:00", 2.3],
["2021-08-01 05:00:00", 2.6],
["2021-08-02 06:00:00", 2.7],
["2021-08-03 07:00:00", 2.9],
["2021-08-04 08:00:00", 3.1],
["2021-08-05 09:00:00", 2.3],
["2021-08-06 10:00:00", 2.8],
["2021-08-07 11:00:00", 3.1],
["2021-08-08 12:00:00", 3.2],
["2021-08-09 13:00:00", 4.1],
["2021-08-10 14:00:00", 3.8],
["2021-08-11 15:00:00", 4.2],
["2021-08-12 16:00:00", 4.0],
["2021-08-13 17:00:00", 5.1],
["2021-08-14 18:00:00", 4.7],
["2021-08-15 19:00:00", 4.5],
["2021-08-16 20:00:00", 4.9],
["2021-08-17 21:00:00", 4.3],
["2021-08-18 22:00:00", 3.9]
]
},
],
yaxis: [{
title: {
text: "Revenue / Cost"
},
seriesName: "Revenue",
tickAmount: 5,
axisBorder: {
show: true
},
axisTicks: {
show: true
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0,
},
},
tooltip: {
enabled: true,
offsetX: 0,
},
labels: {
formatter: function(val) {
return (val).toFixed(0);
},
}
},
{
title: {
text: "N/A"
},
seriesName: "N/A",
show: false
},
{
title: {
text: "Profit "
},
opposite: true,
tickAmount: 5,
seriesName: "Profit",
axisBorder: {
show: true,
},
axisTicks: {
show: true,
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0,
},
},
tooltip: {
enabled: true,
offsetX: 0,
},
},
],
labels: [
["2021-07-27 00:00:00"],
["2021-07-28 01:00:00"],
["2021-07-29 02:00:00"],
["2021-07-30 03:00:00"],
["2021-07-31 04:00:00"],
["2021-08-01 05:00:00"],
["2021-08-02 06:00:00"],
["2021-08-03 07:00:00"],
["2021-08-04 08:00:00"],
["2021-08-05 09:00:00"],
["2021-08-06 10:00:00"],
["2021-08-07 11:00:00"],
["2021-08-08 12:00:00"],
["2021-08-09 13:00:00"],
["2021-08-10 14:00:00"],
["2021-08-11 15:00:00"],
["2021-08-12 16:00:00"],
["2021-08-13 17:00:00"],
["2021-08-14 18:00:00"],
["2021-08-15 19:00:00"],
["2021-08-16 20:00:00"],
["2021-08-17 21:00:00"],
["2021-08-18 22:00:00"]
],
xaxis: {
type: 'datetime',
min: Date.now() - (7 * 86400000),
max: Date.now(),
labels: {
datetimeFormatter: {
year: 'yyyy',
month: 'MMM \'yy',
day: 'MMM dd',
hour: 'HH:mm'
},
},
tickPlacement: 'on',
tooltip: {
enabled: false,
}
},
};
const lineChart = new ApexCharts(lineChartEl, lineChartOptions);
lineChart.render();<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.27.3/apexcharts.min.js"></script>
<div id="line-chart"></div>from ApexCharts: Data not showing when zoomed in to hour level
No comments:
Post a Comment