Can someone tell me why the last bar is missing on the far right and why the data labels are missing for the green bars? I can’t seem to figure it out.
{
type: 'bar',
data: {
labels: [
'01/01',
'01/02',
'01/03',
'01/04',
'01/05',
'01/06',
'01/07',
'01/08',
'01/09',
'01/10',
'01/11',
'01/12',
'01/13',
'01/14',
],
yAxisID: 'A',
datasets: [
{
type: 'line',
label: 'Low Temp',
borderColor: 'rgb(0,0,204)',
borderWidth: 2,
fill: 'false',
data: [33, 33, 35, 36, 36, 41, 40, 44, 33, 33, 42, 37, 33, 33],
yAxisID: 'B',
datalabels: {
labels: {
title: null,
},
},
},
{
type: 'line',
label: 'High Temp',
borderColor: 'rgb(204,0,0)',
borderWidth: 2,
fill: 'false',
data: [66, 55, 45, 56, 61, 65, 57, 70, 70, 55, 63, 70, 53, 62],
yAxisID: 'B',
datalabels: {
labels: {
title: null,
},
},
},
{
label: 'Estimated',
xAxisID: 'C',
type: 'bar',
data: [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
],
borderColor: 'rgb(255, 255, 255)',
borderWidth: 2,
backgroundColor: 'rgb(234,214,124)',
},
{
label: 'Actual',
xAxisID: 'C',
type: 'bar',
data: [
720, 680, 720, 680, 720, 720, 640, 680, 720, 640, 680, 720, 640, 600,
],
borderColor: 'rgb(255, 255, 255)',
backgroundColor: 'rgb(0,255,0)',
},
],
},
options: {
responsive: 'true',
title: {
display: 'true',
text: 'Daily Usage History',
},
legend: {
display: 'true',
reverse: 'true',
position: 'bottom',
align: 'middle',
},
scales: {
yAxes: [
{
id: 'A',
display: 'true',
type: 'linear',
scaleLabel: {
display: 'true',
labelString: 'Usage(KWH)',
},
ticks: {
fontColor: 'rgb(0,0,0)',
},
gridLines: {
display: 'false',
},
},
{
id: 'B',
display: 'true',
type: 'linear',
position: 'right',
scaleLabel: {
display: 'true',
labelString: 'Temperature',
},
ticks: {
fontColor: 'rgb(0,0,0)',
},
gridLines: {
display: 'false',
},
},
],
xAxes: [
{
id: 'C',
stacked: 'true',
display: 'true',
scaleLabel: {
display: 'true',
labelString: 'Day',
},
},
],
},
tooltips: {
mode: 'index',
intersect: 'true',
},
plugins: {
datalabels: {
id: 'A',
anchor: 'center',
align: 'top',
color: 'rgb(102, 102, 102)',
font: {
weight: 'bold',
},
},
tickFormat: {
useGrouping: 'true',
},
},
},
}
