javascript - Show point values in Radar Chart using chart.js - Stack Overflow

admin管理员组

文章数量:1430093

How can I show the values in the chart using chart.js?

UPDATE: I am using the options below but I couldn't find any answer.

    options: {
    scale: {
      angleLines: {
        lineWidth: 0.5,
        color: 'rgba(128, 128, 128, 0.2)'
      },
      pointLabels: {
        fontSize: 14,
        fontStyle: '300',
        fontColor: 'rgba(204, 204, 204, 1)',
        fontFamily: "'Lato', sans-serif"
      },
      ticks: {
        beginAtZero: true,
        maxTicksLimit: 4,
        min: 0,
        max: 4,
        display: false
      }
    }
}



Sample pen 

expected result

Thanks in advance

How can I show the values in the chart using chart.js?

UPDATE: I am using the options below but I couldn't find any answer.

    options: {
    scale: {
      angleLines: {
        lineWidth: 0.5,
        color: 'rgba(128, 128, 128, 0.2)'
      },
      pointLabels: {
        fontSize: 14,
        fontStyle: '300',
        fontColor: 'rgba(204, 204, 204, 1)',
        fontFamily: "'Lato', sans-serif"
      },
      ticks: {
        beginAtZero: true,
        maxTicksLimit: 4,
        min: 0,
        max: 4,
        display: false
      }
    }
}



Sample pen https://codepen.io/melvik/pen/ZEGaexy

expected result

Thanks in advance

• javascript
• vue.js
• chart.js
• radar-chart

Share Improve this question Follow edited Mar 7, 2020 at 0:35 melvik asked Mar 6, 2020 at 22:32 melvikmelvik 4311 silver badge55 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

chartjs-plugin-datalabels & chart.js radar.

datalabels Datalabels Formatter

https://chartjs-plugin-datalabelslify./guide/formatting.html#data-transformation

1/2. Basic example - return "hello world"

2/2. "practical example" - return value:

formatter: function(value, context) {
  return context.chart.data.labels[context.value];
}

tooltip: false

Set tooltip to false (We use a visible value instead)

tooltips: false,

Basic snippet example:

// Change default options for ALL charts
Chart.helpers.merge(Chart.defaults.global.plugins.datalabels, {
  opacity: 1,
  textAlign: 'left',
  color: 'white',
  borderColor: '#11469e',
  borderWidth: 2,
  borderRadius: 100,
  font: {
    weight: 'bold',
    size: 12,
    lineHeight: 1 /* align v center */
  },
  padding: {
    top: 5
  },
  /* hover styling */
  backgroundColor: function(context) {
    return context.hovered ? context.dataset.borderColor : 'white';
  },
  color: function(context) {
    return context.hovered ? 'white' : context.dataset.borderColor;
  },
  listeners: {
    enter: function(context) {
      context.hovered = true;
      return true;
    },
    leave: function(context) {
      context.hovered = false;
      return true;
    }
  }
});

var data = {
  labels: ["Ball Skills", "Shooting", "Physical", "Defence", "Passing"],
  datasets: [{
    label: "De maria",
    backgroundColor: "rgba(38,120,255,0.2)",
    borderColor: "rgba(38,120,255, 1)",
    data: [90, 86, 76, 65, 82]
  }]
};

var options = {
  responsive: true,
  tooltips: false,
  title: {
    text: 'chartjs-plugin-datalabels - basic example',
    display: true,
    position: `bottom`,
  },
  plugins: {
    /* ######### https://chartjs-plugin-datalabelslify./ #########*/
    datalabels: {
      /* formatter */
      formatter: function(value, context) {
        return context.chart.data.labels[context.value];
      }
    }
  },
  /* scale: https://www.chartjs/docs/latest/axes/radial/linear.html#axis-range-settings */
  scale: {
    angleLines: {
      display: true
    },
    pointLabels:{
      /* https://www.chartjs/docs/latest/axes/radial/linear.html#point-label-options */
      fontSize: 15,
      fontColor: 'black',
      fontStyle: 'bold',
      callback: function(value, index, values) {
        return value;
      }
    },
    ticks: {
      /* https://www.chartjs/docs/latest/axes/styling.html#tick-configuration */
      /* suggestedMax and suggestedMin settings only change the data values that are used to scale the axis */
      suggestedMin: 0,
      suggestedMax: 100,
      stepSize: 25, /* 25 - 50 - 75 - 100 */
      maxTicksLimit: 11, /* Or use maximum number of ticks and gridlines to show */
      display: false, // remove label text only,
    }
  },
  legend: {
    labels: {
      padding: 10,
      fontSize: 14,
      lineHeight: 30,
    },
  },
};

var myChart = new Chart(document.getElementById("chart"), {
  type: 'radar',
  data: data,
  options: options
});

<canvas id="chart" width="500" height="350"></canvas>
<br>
<br>
<a href="https://chartjs-plugin-datalabelslify./" target="_blank">chartjs-plugin-datalabels</a>


<script src="https://cdn.jsdelivr/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>

codepen: https://codepen.io/ezra_siton/pen/bGdYaLd

本文标签： javascriptShow point values in Radar Chart using chartjsStack Overflow