Have an issue with box annotation.

[emanresuwenaretne]

Face the problem as documented here - https://stackoverflow.com/questions/68229521/chart-js-multiple-box-annotations-displays-only-the-last-box

It works good if I don't use date labels. But once I start using date labels it doesn't work. Can you please check? Thanks.

[kurkle]

The problem is in your scale config that is in chart.js v2 format. Additionally you were missing a date-adapter required by the time scale and the parser string for your timestamps.

https://jsfiddle.net/5cqxth2r/

[emanresuwenaretne]

I am getting an error - angular.js:13708 Error: This method is not implemented: Check that a complete date adapter is provided. now

Using the following for the scale -

scales: {
x: {
type: 'time',
time: {
parser: 'H:mm',
displayFormats: timeFormat,
}
}
},

[kurkle]

https://www.chartjs.org/docs/latest/axes/cartesian/time.html

[emanresuwenaretne]

Thanks.

After adding - chartjs-adapter-date-fns.js I am getting the following error message now.

angular.js:13708 TypeError: Cannot read property 'parse' of undefined
at so.parse (chartjs-adapter-date-fns.js:7)
at ea (chart.js:14)
at sa.parse (chart.js:14)
at po.parsePrimitiveData (chart.js:14)
at po.parse (chart.js:14)
at po._insertElements (chart.js:14)
at po._resyncElements (chart.js:14)
at po.buildOrUpdateElements (chart.js:14)
at eo.update (chart.js:14)
at new eo (chart.js:14)

[kurkle]

https://github.com/chartjs/chartjs-adapter-date-fns#installation

[emanresuwenaretne]

I am importing the JS files in *.html using -

<script src="../Controllers/chart.js"></script>

<script src="../Controllers/chartjspluginannotation.js"></script>
<script src="../Controllers/chartjs-adapter-date-fns.js"></script>
<script>
    import { de } from 'date-fns/locale';
</script>

In my Controller.JS file -

1)How do I assign "de" to date adapter?

When I do the following -

adapters: {
date: {
locale: de
}
}

I get - angular.js:13708 Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 30 of the expression

[emanresuwenaretne]

Used

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-adapter-moment.min.js"></script>

and following in the x scale configuration -

scales: {
x: {
type: 'time',
time: {
parser: 'H:mm',
displayFormats: timeFormat
},
adapters: {
date: {
locale: 'en-GB'
}
}
}
} and it started working now.

Thanks a lot for your help.