first and last bars are cut to half.
const drawDayGraph = (x_data, y_data, div_id) => {
var trace1 = {
x: x_data,
y: y_data,
type: 'bar',
marker: {
color: '#FEDB41',
},
};
var data = [trace1];
var start_time = new Date(x_data[0]);
var end_time = new Date(x_data[0]);
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});
}
And I want to display all hours at x-axis from 7 AM TO 7 PM (like image below)
