How to install plugin for chartjs in javascript

Question

My goal is to add an average line to my barchart.

I downloaded the github repo for this plugin chartjs-plugin-annotation and added to my wordpress theme in path:

/Users/Name/Downloads/public_html/wp-content/themes/Total/assets/js/chartjs-plugin-annotation-master/src/annotation.js

Next, I call it in my html:

<script src="annotation.js"></script>

Lastly, I call it my chartjs script:

<canvas id="Chart"></canvas>
                            <script>
                            var charts_plugin = chartjs-plugin-annotation.js;
                            var canvas_2 = document.getElementById("Chart");
                            var ctx_2 = canvas_2.getContext('2d');
                            var Chart = new Chart(ctx_2, {
                                    plugins: [charts_plugin],
                                type: 'bar',
                                data: {
                                  labels: <?php echo json_encode($arr_macd_dates_formated); ?>,
                                  datasets: [
                                    {
                                      label: '<?php echo $str_macd, $arr_macd_name[0]  ; ?>',
                                      backgroundColor: ["#faae00"],
                                      data: <?php echo json_encode($arr_macd_diff); ?>
                                    }
                                  ]
                                },
                                options: {
                                  legend: { display: false },
                                  title: {
                                    display: true,
                                    },
                                        annotation: {
                                          annotations: [{
                                            type: 'line',
                                            mode: 'horizontal',
                                            scaleID: 'y-axis-0',
                                            value: 5,
                                            borderColor: 'rgb(75, 192, 192)',
                                            borderWidth: 4,
                                            label: {
                                              enabled: false,
                                              content: 'Test label'
                                            }
                                          }]
                                        }
                                }
                            });

                            </script>

Here is how I call my chart js :

function custom_scripts() {
    wp_enqueue_script( 'chart-js', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.1/chart.js', array(), true );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts');

This does not call the plugin:

var charts_plugin = chart-js-annotation.js;

makes the chart disappear.

Please provide your full HTML file or a minimal "working" example. — Lars Kakavandi-Nielsen
– Lars Kakavandi-Nielsen, Commented Apr 12, 2021 at 18:08
Maybe easier to post link to my site: signal-invest.com/tick/?ticker=aapl — doomdaam
– doomdaam, Commented Apr 12, 2021 at 18:09
også lad være med at skrive kommentar på danks :p (bare en joke) - Just asked him not write comments in Danish in code :) — Lars Kakavandi-Nielsen
– Lars Kakavandi-Nielsen, Commented Apr 12, 2021 at 18:12
hehe yeah pretty easy XD But æ,ø, and å can cause trouble in code from time to time so just in general don't :) But check the error and try and fix it from there :) — Lars Kakavandi-Nielsen
– Lars Kakavandi-Nielsen, Commented Apr 12, 2021 at 18:15
Right-click and hit show page source / inspect element (or whatever it is called in chrome) it will give you a lot of info and you should see a warning with a red "stop" sign — Lars Kakavandi-Nielsen
– Lars Kakavandi-Nielsen, Commented Apr 12, 2021 at 18:18

bmnidhin · Accepted Answer · 2021-04-12 18:08:34Z

1

Maybe annotation.js is not in the same directory as the HTML file.

Try

<script src="path/to/annotation.js"></script>

Example

<script src="/wp-content/themes/Total/assets/js/chartjs-plugin-annotation-master/src/annotation.js"></script>

Also

var charts_plugin = chartjs-plugin-annotation.js;

Try changing this line to var charts_plugin = path/to/annotation.js;

answered Apr 12, 2021 at 18:08

bmnidhin

5611 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

doomdaam Over a year ago

So weird, the entire graph disappears when I add the var charts_plugin = path/to/annotation.js;

bmnidhin Over a year ago

path/to/ is just a placeholder. replace with your path to chart.js

doomdaam Over a year ago

I replaced that but when I call the variable in the plugins in chartjs, the graph disappears again.

Collectives™ on Stack Overflow

How to install plugin for chartjs in javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related