Gallery Back to Gallery

Multiple Radar Charts

CATEGORIESIntencityFlawourChillExcitementGood MoodAnxietyHungerLastingEffectType 1Type 2
CATEGORIESIntencityFlawourChillExcitementGood MoodAnxietyHungerLastingEffect241420162412142410Type 1Type 2
CATEGORIESIntencityFlawourChillExcitementGood MoodAnxietyHungerLastingEffectType 1Type 2Type 3
CATEGORIESIntencityFlawourChillExcitementGood MoodAnxietyHungerLastingEffect32725252220222027Type 1Type 2
Powered by ZingChart 
<!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

Related Documentation:

Effect
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
10
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
Type 3
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
22
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source