Issue 1:
The image of the bar graph displays that the left and right bars are cut in half. Here is a link to the image.
const drawDayGraph = (div_id) => {
var trace1 = {
x: [1614882600000, 1614886200000, 1614889800000, 1614893400000, 1614897000000, 1614900600000, 1614904200000, 1614907800000, 1614911400000, 1614915000000, 1614918600000, 1614922200000, 1614925800000, 1614929400000, 1614933000000, 1614936600000, 1614940200000, 1614943800000, 1614947400000, 1614951000000, 1614954600000, 1614958200000, 1614961800000, 1614965400000],
y: [0, 0, 0, 0, 0, 0, 0.7600000000093132, 32.389999999897555, 132.72999999998137, 224.9000000001397, 310.5200000000186, 331.14999999990687, 425.2100000001956, 423.80999999982305, 391.8100000000559, 298.2399999999907, 184.95999999996275, 53.25, 2.550000000046566, 0, 0, 0, 0, 0],
type: 'bar',
marker: {
color: '#FEDB41',
},
};
var data = [trace1];
var start_time = new Date(1614882600000);
var end_time = new Date(1614882600000);
start_time.setHours(7,0,0);
end_time.setHours(19,0,0);
var layout = {
xaxis: {
fixedrange: true,
offset: true,
tickformat: '%I',
zeroline: true,
showline: false,
tickfont : {
size : 10,
color : 'white'
},
type: 'date',
automargin: true,
range:[
start_time.getTime(),
end_time.getTime()
]
},
"yaxis": {
"visible": false,
"showgrid": false,
"zeroline": false
},
margin: {
l: 2,
r: 2,
b: 20,
t: 2,
},
paper_bgcolor: 'rgba(0,0,0,0)',
plot_bgcolor: 'rgba(0,0,0,0)',
};
Plotly.newPlot(div_id , data, layout, {displayModeBar: false});
}
The issue arises with the bar chart where the first and last bars are cut in half. The goal is to display full bars instead.
Problem 2:
I aim to indicate hours beneath each bar on the x-axis from 7 AM to 7 PM. Refer to this sample for representation - image. Currently struggling to find solutions for both issues. Any assistance would be appreciated. Thank you.