Radar Chart with Rose Scale

Please enable JavaScript to see the interactive demo.

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

<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }

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


<body class="zc-body">
  
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      type: 'radar',
      backgroundColor: '#262626 #424242',
      fillAngle: 0,
      title: {
        text: 'BUDGET MANAGEMENT',
        padding: '20px 20px',
        backgroundColor: '#080808 #424242',
        fillAngle: 0,
        fontColor: '#fff',
        fontFamily: 'Arial',
        fontSize: '16px',
        fontWeight: 'normal',
        height: '40px',
        textAlign: 'left'
      },
      legend: {
        padding: '10px 12px',
        backgroundColor: '#4d5154',
        item: {
          fontColor: '#F1F1F1',
          fontFamily: 'Arial',
          fontSize: '12px',
          fontWeight: 'normal'
        },
        shadow: false,
        width: '125px',
        x: '0px',
        y: '50px'
      },
      plotarea: {
        margin: '50px 15% 10px 15%'
      },
      scaleK: {
        values: ['Sales Support', 'Design', 'Production', 'Development', 'Quality<br>Assurance', 'Project<br>Management'],
        aspect: 'circle',
        guide: {
          items: [{
              alpha: 1,
              backgroundColor: '#048C5C'
            },
            {
              alpha: 1,
              backgroundColor: '#F5C33D'
            }
          ],
          lineColor: '#0a0a0a',
          lineStyle: 'normal',
          lineWidth: '2px'
        },
        item: {
          alpha: 0.8,
          bold: false,
          fontColor: '#f1f1f1',
          fontFamily: 'Arial',
          fontSize: '12px',
          lineWidth: '10px',
          offsetR: '5px'
        },
        tick: {
          lineColor: '#000000',
          lineWidth: '2px',
          size: '10px'
        }
      },
      scaleR: {
        guide: {
          alpha: 1,
          lineColor: '#fff'
        }
      },
      scaleV: {
        values: '0:30000:10000',
        format: '$%v',
        guide: {
          alpha: 0.5,
          items: [{
              alpha: 0.15,
              backgroundColor: '#000'
            },
            {
              alpha: 0.15,
              backgroundColor: '#fff'
            }
          ],
          lineColor: '#0a0a0a',
          lineWidth: '2px'
        },
        item: {
          paddingLeft: '4px',
          bold: true,
          fontColor: '#fff',
          fontFamily: 'Arial',
          fontSize: '10px'
        },
        multiplier: true,
        refLine: {
          lineColor: '#fff',
          lineWidth: '2px'
        },
        tick: {
          lineColor: '#fff',
          lineWidth: '2px',
          placement: 'cross',
          size: '10px'
        }
      },
      series: [{
          text: 'Budget',
          values: [6000, 27500, 14250, 25000, 13500, 6500],
          tooltip: {
            padding: '5px 10px',
            backgroundColor: '#BE462C',
            borderRadius: '8px',
            fontColor: '#c0c0c0',
            fontFamily: 'Arial',
            fontSize: '10px',
            shadow: false
          },
          alpha: 0.5,
          legendMarker: {
            type: 'circle',
            alpha: 0.8,
            backgroundColor: '#BE462C',
            borderColor: '#fff',
            borderWidth: '1px',
            size: '5px'
          },
          lineColor: '#BE462C',
          lineWidth: '2px',
          marker: {
            alpha: 0.5,
            backgroundColor: '#BE462C',
            borderColor: '#fff',
            borderWidth: '1px',
            size: '5px'
          },
          shadow: false
        },
        {
          text: 'Actual Spend',
          values: [16500, 18000, 28950, 19575, 18400, 14600],
          tooltip: {
            padding: '5px 10px',
            backgroundColor: '#00588E',
            borderRadius: '8px',
            fontColor: '#fff',
            fontFamily: 'Arial',
            fontSize: '10px',
            shadow: false
          },
          alpha: 0.5,
          legendMarker: {
            type: 'circle',
            alpha: 0.8,
            backgroundColor: '#00588E',
            borderColor: '#fff',
            borderWidth: '1px',
            size: '5px'
          },
          lineColor: '#00588E',
          lineWidth: '2px',
          marker: {
            alpha: 0.5,
            backgroundColor: '#00588E',
            borderColor: '#fff',
            borderWidth: '1px',
            size: '5px'
          }
        }
      ]
    };

    // RENDER CHARTS
    // -----------------------------
    zingchart.render({
      id: 'myChart',
      data: chartConfig
    });
  </script>
</body>

</html>

<!doctype html>
<html class="zc-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 id="myChart" class="chart--container">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>
    
  </body>
</html>

// CHART CONFIG
// -----------------------------
let chartConfig = {
  type: 'radar',
  backgroundColor: '#262626 #424242',
  fillAngle: 0,
  title: {
    text: 'BUDGET MANAGEMENT',
    padding: '20px 20px',
    backgroundColor: '#080808 #424242',
    fillAngle: 0,
    fontColor: '#fff',
    fontFamily: 'Arial',
    fontSize: '16px',
    fontWeight: 'normal',
    height: '40px',
    textAlign: 'left'
  },
  legend: {
    padding: '10px 12px',
    backgroundColor: '#4d5154',
    item: {
      fontColor: '#F1F1F1',
      fontFamily: 'Arial',
      fontSize: '12px',
      fontWeight: 'normal'
    },
    shadow: false,
    width: '125px',
    x: '0px',
    y: '50px'
  },
  plotarea: {
    margin: '50px 15% 10px 15%'
  },
  scaleK: {
    values: ['Sales Support', 'Design', 'Production', 'Development', 'Quality<br>Assurance', 'Project<br>Management'],
    aspect: 'circle',
    guide: {
      items: [
        {
          alpha: 1,
          backgroundColor: '#048C5C'
        },
        {
          alpha: 1,
          backgroundColor: '#F5C33D'
        }
      ],
      lineColor: '#0a0a0a',
      lineStyle: 'normal',
      lineWidth: '2px'
    },
    item: {
      alpha: 0.8,
      bold: false,
      fontColor: '#f1f1f1',
      fontFamily: 'Arial',
      fontSize: '12px',
      lineWidth: '10px',
      offsetR: '5px'
    },
    tick: {
      lineColor: '#000000',
      lineWidth: '2px',
      size: '10px'
    }
  },
  scaleR: {
    guide: {
      alpha: 1,
      lineColor: '#fff'
    }
  },
  scaleV: {
    values: '0:30000:10000',
    format: '$%v',
    guide: {
      alpha: 0.5,
      items: [
        {
          alpha: 0.15,
          backgroundColor: '#000'
        },
        {
          alpha: 0.15,
          backgroundColor: '#fff'
        }
      ],
      lineColor: '#0a0a0a',
      lineWidth: '2px'
    },
    item: {
      paddingLeft: '4px',
      bold: true,
      fontColor: '#fff',
      fontFamily: 'Arial',
      fontSize: '10px'
    },
    multiplier: true,
    refLine: {
      lineColor: '#fff',
      lineWidth: '2px'
    },
    tick: {
      lineColor: '#fff',
      lineWidth: '2px',
      placement: 'cross',
      size: '10px'
    }
  },
  series: [
    {
      text: 'Budget',
      values: [6000, 27500, 14250, 25000, 13500, 6500],
      tooltip: {
        padding: '5px 10px',
        backgroundColor: '#BE462C',
        borderRadius: '8px',
        fontColor: '#c0c0c0',
        fontFamily: 'Arial',
        fontSize: '10px',
        shadow: false
      },
      alpha: 0.5,
      legendMarker: {
        type: 'circle',
        alpha: 0.8,
        backgroundColor: '#BE462C',
        borderColor: '#fff',
        borderWidth: '1px',
        size: '5px'
      },
      lineColor: '#BE462C',
      lineWidth: '2px',
      marker: {
        alpha: 0.5,
        backgroundColor: '#BE462C',
        borderColor: '#fff',
        borderWidth: '1px',
        size: '5px'
      },
      shadow: false
    },
    {
      text: 'Actual Spend',
      values: [16500, 18000, 28950, 19575, 18400, 14600],
      tooltip: {
        padding: '5px 10px',
        backgroundColor: '#00588E',
        borderRadius: '8px',
        fontColor: '#fff',
        fontFamily: 'Arial',
        fontSize: '10px',
        shadow: false
      },
      alpha: 0.5,
      legendMarker: {
        type: 'circle',
        alpha: 0.8,
        backgroundColor: '#00588E',
        borderColor: '#fff',
        borderWidth: '1px',
        size: '5px'
      },
      lineColor: '#00588E',
      lineWidth: '2px',
      marker: {
        alpha: 0.5,
        backgroundColor: '#00588E',
        borderColor: '#fff',
        borderWidth: '1px',
        size: '5px'
      }
    }
  ]
};

// RENDER CHARTS
// -----------------------------
zingchart.render({
  id: 'myChart',
  data: chartConfig
});

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}

Rankflow Chart 206/271 Radar Chart with Token Tooltips

Radar Chart with Rose Scale

Related Documentation: