0

I'm new to visualization community. I'm having a requirement which is followsenter image description here

And what I can achieve is following output from chartjs,enter image description here

Here is the code for your reference,

<!DOCTYPE html><html><head><title>Radar Chart Example</title><script src="https://cdn.jsdelivr.net/npm/chart.js"></script><style>canvas{width:800px;height:700px;margin:40px auto}</style></head><body><canvas id="radarChart"></canvas><script>// Sample data for the radar chart
const data = {
  //labels: ["Data Security + Protection", "Identity + Access Management", "Platform + Application Security", "Detection + Response"],
  labels: ["Label 1", "Label 2", "label 3", "label 4"],
  datasets: [
    {
      label: "Dataset 1",
      data: [2,2,2,2,],
      //backgroundColor: "rgba(75, 192, 192, 0.4)",
      borderColor: "rgba(75, 192, 192, 1)",
      borderWidth: 2,
    },
    {
      label: "Dataset 2",
      data: [2.1,2.1,2.1,2.1,],
      //backgroundColor: "#bd4147",
      borderColor: "#bd4147",
      borderWidth: 2,
    },
  ],
};

// Get the canvas element
const canvas = document.getElementById("radarChart");

// Set the canvas width and height to make it a circle
canvas.width = 800;
canvas.height = 700;

// Create the radar chart
const radarChart = new Chart(canvas, {
  type: "radar",
  data: data,
  options: {
    parsing: {
        xAxisKey: 'id',
        yAxisKey: 'nested.value'
    },
    responsive: false,
    scales: {
        r: {
        grid: {
            circular: true
        },
        max: 3,
        min: 0,
        ticks: {
            stepSize: 1
        }
        }
    },
    scale: {
      ticks: {
        grid:{
            circular: true
        },
        beginAtZero: true,
        max: 60,
        stepSize: 1,
        min:0,
        max:3,
      },
    },
    layout: {
      padding: {
        top: 50,
        bottom: 50,
        left: 50,
        right: 50,
      },
    },
  },
});</script></body></html>

As a newbie, I can't figure out which chart is suitable for my requirement. If it's the radial chart, how can I achieve my requirement? And there will be multiple points for a single label. And I may have multiple datasets. I'm ready to explore other libraries too. TIA.

ArulRulzz
  • 87
  • 6
  • If I understood well, you need a stacked radar chart (where datasets are stacked). If yes, have a look to the sample: https://www.chartjs.org/docs/latest/samples/area/radar.html – user2057925 May 30 '23 at 14:48
  • @user2057925 Thanks for the reply. As I said earlier, there maybe multiple values for a label. For example, For label1, I may have an array of values. – ArulRulzz May 30 '23 at 15:14
  • Does it answer your question? https://stackoverflow.com/questions/67463864/javascript-d3-plotting-radar-graph – Michael Rovinsky May 31 '23 at 04:04

0 Answers0