Chartjs Radar Fragments

Question

I use chartjs to draw a radar chart.

The value is displayed when you hover at a point in the graph, but I would like to always show this value. I need to change the view to display data when printing a page.

This is my current schedule. The mark is displayed when you hover over

I want to show the value always, as in the following figure

Answer 1

The following answer only works for Chart.js v2.
If you want a solution v1, check quietly .

---

You want to use the animation property for chart parameters:

 options : { animation: { duration: 500, onComplete: function () { // The code here will be executed at the end of the animation // (after 500ms here) // You can get the canvas context using the following : var ctx = this.chart.ctx; // `this` being the chart instance } } } 

---

Now you want to add a value above it, which can be done using the data model, which you can find in the properties of the dataset:

 onComplete: function() { // You get the canvas context, to help you writing what you want var ctx = this.chart.ctx; // Here you set the context with what you need (font, size, color ...) ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily); ctx.textAlign = 'center'; ctx.fillStyle = 'black'; // For every dataset ... this.data.datasets.forEach(function(dataset) { // For every data in the dataset ... for (var i = 0; i < dataset.data.length; i++) { // We get its model var model = dataset._meta[0].data[i]._model; // And write the data above it ctx.fillText(dataset.data[i], model.x, model.y - 2); // You can edit the last two arguments according to what you need } }); } 

---

Executes the result of the above code, which you can find in this jsFiddle :

Answer 2

In the js diagram of the documentation, you can run functions when the animation completes with onAnimationComplete : function(){}

Defined by a script

here

Maybe your html file

 <canvas id="my_chart"></canvas> 

Then your js file might look like this:

 fillColor: "#79D1CF", strokeColor: "#79D1CF", data: [60, 80, 81, 56, 55, 40] var ctx = document.getElementById("myChart1").getContext("2d"); var myLine = new Chart(ctx).Line(chartData, { showTooltips: false, onAnimationComplete: function () { //Your other ChartJs features defined here var ctx = this.chart.ctx; ctx.font = //your font ctx.fillStyle = //your text color ctx.textAlign = "center"; ctx.textBaseline = "bottom"; this.datasets.forEach(function (dataset) { dataset.points.forEach(function (points) { ctx.fillText(points.value, points.x, points.y - 10);//You can change the x and y position of the text as per your requirement }); }) } }); 

// Full attribution passed to the author and stream