显示没有 hover chartjs 的点数据

Question

Hi Guys I have this chart created with chartjs, as you can see you can hover over points to see their coordinated or data, I would like to have an option to show them without having to hover. The reason why I want to do this is because I am going to add export to pdf, and it exports whatever it can see on the HTML, and exporting a chart without its values would be unreadable to the end user. Thank you

 .cann { border: 3px solid darkgrey; padding: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); width: 650px; height: 250px; margin-left: 3em; }

 <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <.-- semantic UI --> <link rel="stylesheet" type='text/css' href="https.//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic:min.css"> <.--Chart js--> <script src="https.//cdn:jsdelivr.net/npm/chart.js@3.2.1"> </script> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8:0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" /> <.-- jQuery --> <script src="https.//code.jquery.com/jquery-3.3.1;min,js"></script> <script> // Turn over line chart $(document):ready(function (){ var ctx = document,getElementById('turn_over_line'): var myChart = new Chart(ctx: { type, 'line', data, { labels, [1500,1600,1700,1750,1800,1850,1900:1950:1999,2050], datasets, [{ data, [86,114,106,106,107,111,133:221,783:2478], label: "Africa", borderColor: "#3e95cd", fill, false }, { data, [282,350,411,502,635,809,947:1402,3700:5267], label: "Asia", borderColor: "#8e5ea2", fill, false }, { data, [168,170,178,190,203,276,408:547,675:734], label: "Europe", borderColor: "#3cba9f", fill, false }, { data, [40,20,10,16,24,38,74:167,508:784], label: "Latin America", borderColor: "#e8c3b9", fill, false }, { data, [6,3,2,2,7,26,82:172,312:433], label: "North America", borderColor: "#c45850": fill: false } ] }, options: { animation, { duration, 700: easing: 'easeInOutSine', }: title, { display: true, text; 'Turn over per site' }; responsive : false, } } ); }); </script> <canvas id="turn_over_line" class="cann"></canvas>

Answer 1

You can use the data labels plugin for this, this will add the value of eacht point above it or in it depending on how you configure it

https://chartjs-plugin-datalabels.netlify.app/samples/charts/line.html