Multiple Radar Charts

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/SLEPI78T

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-body {
      background: #252d47;
    }

    /* Tablet: Portrait+ */
    @media screen and (min-width: 768px) {
      .zc-demo {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body class="zc-body">

  <div class="zc-demo">
    <section id="chart1"></section>
    <section id="chart2"></section>
    <section id="chart3"></section>
    <section id="chart4"></section>
  </div>

  <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE CHART LOCATIONS (IDS)
    // -----------------------------
    // Main chart render location
    let chart1Id = 'chart1';
    let chart2Id = 'chart2';
    let chart3Id = 'chart3';
    let chart4Id = 'chart4';

    // Constants
    let white = '#fff';
    let transparent = 'transparent';
    let lightBlue = '#53688b';
    let lightPink = '#c3a9c6';
    let lightGreen = '#82ebc1';

    // CHART CONFIG
    // -----------------------------

    // Chart 1
    let chart1Data = {
      type: 'radar',
      globals: {
        fontFamily: 'Nunito',
      },
      backgroundColor: transparent,
      title: {
        text: 'CATEGORIES',
        align: 'left',
        fontColor: white,
      },
      legend: {
        backgroundColor: transparent,
        borderWidth: '0px',
        marker: {
          type: 'circle',
          borderWidth: '0px',
        },
        x: '16px',
        y: '48px',
      },
      plot: {
        aspect: 'area',
        alphaArea: '.6',
      },
      scaleK: {
        labels: [
          'Intencity',
          'Flawour',
          'Chill',
          'Excitement',
          'Good Mood',
          'Anxiety',
          'Hunger',
          'Lasting',
          'Effect',
        ],
        item: {
          fontColor: white,
        },
        guide: {
          lineStyle: 'solid',
          lineColor: white,
          backgroundColor: transparent,
        },
        tick: {
          lineColor: white,
        },
      },
      scaleV: {
        guide: {
          backgroundColor: transparent,
          lineColor: white,
          lineStyle: 'solid',
        },
        item: {
          visible: false,
        },
      },
      series: [{
          text: 'Type 1',
          values: [3, 27, 27, 27, 22, 20, 22, 20, 27],
          backgroundColor: lightBlue,
          lineColor: lightBlue,
          legendItem: {
            fontColor: lightBlue,
          },
        },
        {
          text: 'Type 2',
          values: [24, 14, 20, 16, 24, 12, 14, 24, 10],
          backgroundColor: lightPink,
          lineColor: lightPink,
          legendItem: {
            fontColor: lightPink,
          },
        },
      ],
    };

    // Chart 2
    let chart2Data = {
      type: 'radar',
      globals: {
        fontFamily: 'Nunito',
      },
      backgroundColor: transparent,
      title: {
        text: 'CATEGORIES',
        align: 'left',
        fontColor: white,
      },
      legend: {
        backgroundColor: transparent,
        borderWidth: '0px',
        marker: {
          type: 'circle',
          borderWidth: '0px',
        },
        x: '16px',
        y: '48px',
      },
      plot: {
        aspect: 'area',
        alphaArea: '.6',
      },
      scaleK: {
        guide: {
          lineStyle: 'solid',
          lineColor: white,
          backgroundColor: transparent,
        },
        item: {
          fontColor: white,
          rules: [{
            rule: '%i == 0 || %i == 2 || %i == 4 || %i == 7',
            fontColor: lightPink,
          }, ],
        },
        labels: [
          'Intencity',
          'Flawour',
          'Chill',
          'Excitement',
          'Good Mood',
          'Anxiety',
          'Hunger',
          'Lasting',
          'Effect',
        ],
        tick: {
          lineColor: white,
        },
      },
      scaleV: {
        guide: {
          backgroundColor: transparent,
          lineColor: white,
          lineStyle: 'solid',
        },
        item: {
          visible: false,
        },
      },
      series: [{
          text: 'Type 1',
          values: [3, 27, 27, 27, 22, 20, 22, 20, 27],
          backgroundColor: lightBlue,
          lineColor: lightBlue,
          legendItem: {
            fontColor: lightBlue,
          },
        },
        {
          text: 'Type 2',
          values: [24, 14, 20, 16, 24, 12, 14, 24, 10],
          backgroundColor: lightPink,
          lineColor: lightPink,
          legendItem: {
            fontColor: lightPink,
          },
          valueBox: {
            backgroundColor: 'var(--purple)',
            borderColor: lightPink,
            borderRadius: '8px',
            borderWidth: '2px',
            fontColor: 'white',
            padding: '2px 8px',
            shadow: false,
          },
        },
      ],
    };

    // Chart 3
    let chart3Data = {
      type: 'radar',
      globals: {
        fontFamily: 'Nunito',
      },
      backgroundColor: transparent,
      title: {
        text: 'CATEGORIES',
        align: 'left',
        fontColor: white,
      },
      legend: {
        backgroundColor: transparent,
        borderWidth: '0px',
        marker: {
          type: 'circle',
          borderWidth: '0px',
        },
        x: '16px',
        y: '48px',
      },
      plot: {
        aspect: 'area',
        alphaArea: '.6',
      },
      scaleK: {
        guide: {
          lineStyle: 'solid',
          lineColor: white,
          backgroundColor: transparent,
        },
        item: {
          fontColor: white,
        },
        labels: [
          'Intencity',
          'Flawour',
          'Chill',
          'Excitement',
          'Good Mood',
          'Anxiety',
          'Hunger',
          'Lasting',
          'Effect',
        ],
        tick: {
          lineColor: white,
        },
      },
      scaleV: {
        guide: {
          lineStyle: 'solid',
          lineColor: white,
          backgroundColor: transparent,
        },
        item: {
          visible: false,
        },
      },
      series: [{
          text: 'Type 1',
          values: [3, 27, 27, 27, 22, 20, 22, 20, 27],
          backgroundColor: lightBlue,
          legendItem: {
            fontColor: lightBlue,
          },
          lineColor: lightBlue,
        },
        {
          text: 'Type 2',
          values: [24, 14, 20, 16, 24, 12, 14, 24, 10],
          backgroundColor: lightPink,
          legendItem: {
            fontColor: lightPink,
          },
          lineColor: lightPink,
        },
        {
          text: 'Type 3',
          values: [5, 25, 12, 6, 8, 10, 25, 3, 10],
          backgroundColor: lightGreen,
          legendItem: {
            fontColor: lightGreen,
          },
          lineColor: lightGreen,
        },
      ],
    };

    // Chart 4
    let chart4Data = {
      type: 'radar',
      globals: {
        fontFamily: 'Nunito',
      },
      backgroundColor: transparent,
      title: {
        text: 'CATEGORIES',
        align: 'left',
        fontColor: white,
      },
      legend: {
        backgroundColor: transparent,
        borderWidth: '0px',
        marker: {
          type: 'circle',
          borderWidth: '0px',
        },
        x: '16px',
        y: '48px',
      },
      plot: {
        aspect: 'area',
        alphaArea: '.6',
      },
      scaleK: {
        guide: {
          lineStyle: 'solid',
          lineColor: white,
          backgroundColor: transparent,
        },
        item: {
          fontColor: white,
          rules: [{
              rule: '%i > 0 && %i < 5',
              fontColor: 'lightBlue',
            },
            {
              rule: '%i == 6 || %i == 8',
              fontColor: 'lightBlue',
            },
          ],
        },
        labels: [
          'Intencity',
          'Flawour',
          'Chill',
          'Excitement',
          'Good Mood',
          'Anxiety',
          'Hunger',
          'Lasting',
          'Effect',
        ],
        tick: {
          lineColor: white,
        },
      },
      scaleV: {
        guide: {
          lineStyle: 'solid',
          lineColor: white,
          backgroundColor: transparent,
        },
        item: {
          visible: false,
        },
      },
      series: [{
          text: 'Type 1',
          values: [24, 14, 20, 16, 24, 12, 14, 24, 10],
          backgroundColor: lightPink,
          legendItem: {
            fontColor: lightPink,
          },
          lineColor: lightPink,
        },
        {
          text: 'Type 2',
          values: [3, 27, 25, 25, 22, 20, 22, 20, 27],
          backgroundColor: lightBlue,
          legendItem: {
            fontColor: lightBlue,
          },
          lineColor: lightBlue,
          valueBox: {
            backgroundColor: 'var(--purple)',
            borderColor: lightBlue,
            borderRadius: '8px',
            borderWidth: '2px',
            fontColor: 'white',
            padding: '2px 8px',
            shadow: false,
          },
        },
      ],
    };

    // RENDER CHARTS
    // -----------------------------

    // Chart 1
    zingchart.render({
      id: chart1Id,
      data: chart1Data,
      height: '560px',
      width: '100%',
    });

    // Chart 2
    zingchart.render({
      id: chart2Id,
      data: chart2Data,
      height: '560px',
      width: '100%',
    });

    // Chart 3
    zingchart.render({
      id: chart3Id,
      data: chart3Data,
      height: '560px',
      width: '100%',
    });

    // Chart 4
    zingchart.render({
      id: chart4Id,
      data: chart4Data,
      height: '560px',
      width: '100%',
    });
  </script>
</body>

</html>

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body class="zc-body">

  <div class="zc-demo">
    <section id="chart1"></section>
    <section id="chart2"></section>
    <section id="chart3"></section>
    <section id="chart4"></section>
  </div>

  <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>

</body>
</html>

// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chart1Id = 'chart1';
let chart2Id = 'chart2';
let chart3Id = 'chart3';
let chart4Id = 'chart4';

// Constants
let white = '#fff';
let transparent = 'transparent';
let lightBlue = '#53688b';
let lightPink = '#c3a9c6';
let lightGreen = '#82ebc1';

// CHART CONFIG
// -----------------------------

// Chart 1
let chart1Data = {
  type: 'radar',
  globals: {
    fontFamily: 'Nunito',
  },
  backgroundColor: transparent,
  title: {
    text: 'CATEGORIES',
    align: 'left',
    fontColor: white,
  },
  legend: {
    backgroundColor: transparent,
    borderWidth: '0px',
    marker: {
      type: 'circle',
      borderWidth: '0px',
    },
    x: '16px',
    y: '48px',
  },
  plot: {
    aspect: 'area',
    alphaArea: '.6',
  },
  scaleK: {
    labels: [
      'Intencity',
      'Flawour',
      'Chill',
      'Excitement',
      'Good Mood',
      'Anxiety',
      'Hunger',
      'Lasting',
      'Effect',
    ],
    item: {
      fontColor: white,
    },
    guide: {
      lineStyle: 'solid',
      lineColor: white,
      backgroundColor: transparent,
    },
    tick: {
      lineColor: white,
    },
  },
  scaleV: {
    guide: {
      backgroundColor: transparent,
      lineColor: white,
      lineStyle: 'solid',
    },
    item: {
      visible: false,
    },
  },
  series: [
    {
      text: 'Type 1',
      values: [3, 27, 27, 27, 22, 20, 22, 20, 27],
      backgroundColor: lightBlue,
      lineColor: lightBlue,
      legendItem: {
        fontColor: lightBlue,
      },
    },
    {
      text: 'Type 2',
      values: [24, 14, 20, 16, 24, 12, 14, 24, 10],
      backgroundColor: lightPink,
      lineColor: lightPink,
      legendItem: {
        fontColor: lightPink,
      },
    },
  ],
};

// Chart 2
let chart2Data = {
  type: 'radar',
  globals: {
    fontFamily: 'Nunito',
  },
  backgroundColor: transparent,
  title: {
    text: 'CATEGORIES',
    align: 'left',
    fontColor: white,
  },
  legend: {
    backgroundColor: transparent,
    borderWidth: '0px',
    marker: {
      type: 'circle',
      borderWidth: '0px',
    },
    x: '16px',
    y: '48px',
  },
  plot: {
    aspect: 'area',
    alphaArea: '.6',
  },
  scaleK: {
    guide: {
      lineStyle: 'solid',
      lineColor: white,
      backgroundColor: transparent,
    },
    item: {
      fontColor: white,
      rules: [
        {
          rule: '%i == 0 || %i == 2 || %i == 4 || %i == 7',
          fontColor: lightPink,
        },
      ],
    },
    labels: [
      'Intencity',
      'Flawour',
      'Chill',
      'Excitement',
      'Good Mood',
      'Anxiety',
      'Hunger',
      'Lasting',
      'Effect',
    ],
    tick: {
      lineColor: white,
    },
  },
  scaleV: {
    guide: {
      backgroundColor: transparent,
      lineColor: white,
      lineStyle: 'solid',
    },
    item: {
      visible: false,
    },
  },
  series: [
    {
      text: 'Type 1',
      values: [3, 27, 27, 27, 22, 20, 22, 20, 27],
      backgroundColor: lightBlue,
      lineColor: lightBlue,
      legendItem: {
        fontColor: lightBlue,
      },
    },
    {
      text: 'Type 2',
      values: [24, 14, 20, 16, 24, 12, 14, 24, 10],
      backgroundColor: lightPink,
      lineColor: lightPink,
      legendItem: {
        fontColor: lightPink,
      },
      valueBox: {
        backgroundColor: 'var(--purple)',
        borderColor: lightPink,
        borderRadius: '8px',
        borderWidth: '2px',
        fontColor: 'white',
        padding: '2px 8px',
        shadow: false,
      },
    },
  ],
};

// Chart 3
let chart3Data = {
  type: 'radar',
  globals: {
    fontFamily: 'Nunito',
  },
  backgroundColor: transparent,
  title: {
    text: 'CATEGORIES',
    align: 'left',
    fontColor: white,
  },
  legend: {
    backgroundColor: transparent,
    borderWidth: '0px',
    marker: {
      type: 'circle',
      borderWidth: '0px',
    },
    x: '16px',
    y: '48px',
  },
  plot: {
    aspect: 'area',
    alphaArea: '.6',
  },
  scaleK: {
    guide: {
      lineStyle: 'solid',
      lineColor: white,
      backgroundColor: transparent,
    },
    item: {
      fontColor: white,
    },
    labels: [
      'Intencity',
      'Flawour',
      'Chill',
      'Excitement',
      'Good Mood',
      'Anxiety',
      'Hunger',
      'Lasting',
      'Effect',
    ],
    tick: {
      lineColor: white,
    },
  },
  scaleV: {
    guide: {
      lineStyle: 'solid',
      lineColor: white,
      backgroundColor: transparent,
    },
    item: {
      visible: false,
    },
  },
  series: [
    {
      text: 'Type 1',
      values: [3, 27, 27, 27, 22, 20, 22, 20, 27],
      backgroundColor: lightBlue,
      legendItem: {
        fontColor: lightBlue,
      },
      lineColor: lightBlue,
    },
    {
      text: 'Type 2',
      values: [24, 14, 20, 16, 24, 12, 14, 24, 10],
      backgroundColor: lightPink,
      legendItem: {
        fontColor: lightPink,
      },
      lineColor: lightPink,
    },
    {
      text: 'Type 3',
      values: [5, 25, 12, 6, 8, 10, 25, 3, 10],
      backgroundColor: lightGreen,
      legendItem: {
        fontColor: lightGreen,
      },
      lineColor: lightGreen,
    },
  ],
};

// Chart 4
let chart4Data = {
  type: 'radar',
  globals: {
    fontFamily: 'Nunito',
  },
  backgroundColor: transparent,
  title: {
    text: 'CATEGORIES',
    align: 'left',
    fontColor: white,
  },
  legend: {
    backgroundColor: transparent,
    borderWidth: '0px',
    marker: {
      type: 'circle',
      borderWidth: '0px',
    },
    x: '16px',
    y: '48px',
  },
  plot: {
    aspect: 'area',
    alphaArea: '.6',
  },
  scaleK: {
    guide: {
      lineStyle: 'solid',
      lineColor: white,
      backgroundColor: transparent,
    },
    item: {
      fontColor: white,
      rules: [
        {
          rule: '%i > 0 && %i < 5',
          fontColor: 'lightBlue',
        },
        {
          rule: '%i == 6 || %i == 8',
          fontColor: 'lightBlue',
        },
      ],
    },
    labels: [
      'Intencity',
      'Flawour',
      'Chill',
      'Excitement',
      'Good Mood',
      'Anxiety',
      'Hunger',
      'Lasting',
      'Effect',
    ],
    tick: {
      lineColor: white,
    },
  },
  scaleV: {
    guide: {
      lineStyle: 'solid',
      lineColor: white,
      backgroundColor: transparent,
    },
    item: {
      visible: false,
    },
  },
  series: [
    {
      text: 'Type 1',
      values: [24, 14, 20, 16, 24, 12, 14, 24, 10],
      backgroundColor: lightPink,
      legendItem: {
        fontColor: lightPink,
      },
      lineColor: lightPink,
    },
    {
      text: 'Type 2',
      values: [3, 27, 25, 25, 22, 20, 22, 20, 27],
      backgroundColor: lightBlue,
      legendItem: {
        fontColor: lightBlue,
      },
      lineColor: lightBlue,
      valueBox: {
        backgroundColor: 'var(--purple)',
        borderColor: lightBlue,
        borderRadius: '8px',
        borderWidth: '2px',
        fontColor: 'white',
        padding: '2px 8px',
        shadow: false,
      },
    },
  ],
};

// RENDER CHARTS
// -----------------------------

// Chart 1
zingchart.render({
  id: chart1Id,
  data: chart1Data,
  height: '560px',
  width: '100%',
});

// Chart 2
zingchart.render({
  id: chart2Id,
  data: chart2Data,
  height: '560px',
  width: '100%',
});

// Chart 3
zingchart.render({
  id: chart3Id,
  data: chart3Data,
  height: '560px',
  width: '100%',
});

// Chart 4
zingchart.render({
  id: chart4Id,
  data: chart4Data,
  height: '560px',
  width: '100%',
});

.zc-body {
  background: #252d47;
}

/* Tablet: Portrait+ */
@media screen and (min-width: 768px) {
  .zc-demo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

.zc-ref { display:none; }

Gradient Arrow Line Chart 36/281 Mobile Fitness Dashboard

Multiple Radar Charts

Related Documentation: