• Edit
  • Download
    • <!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>
    html,
    body {
      height: 100%;
      width: 100%;
    }

    #myChart {
      height: 100%;
      width: 100%;
      min-height: 250px;
    }
  </style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      type: 'radar',
      plot: {
        aspect: 'area',
        animation: {
          effect: 3,
          sequence: 1,
          speed: 700
        }
      },
      scaleV: {
        visible: false
      },
      scaleK: {
        values: '0:5:1',
        labels: ['Dogs', 'Cats', 'Fish', 'Birds', 'Reptiles', 'Horses'],
        item: {
          fontColor: '#607D8B',
          backgroundColor: "white",
          borderColor: "#aeaeae",
          borderWidth: 1,
          padding: '5 10',
          borderRadius: 10,
        },
        refLine: {
          lineColor: '#c10000'
        },
        tick: {
          lineColor: '#59869c',
          lineWidth: 2,
          lineStyle: 'dotted',
          size: 20
        },
        guide: {
          lineColor: "#607D8B",
          lineStyle: 'solid',
          alpha: 0.3,
          backgroundColor: "#c5c5c5 #718eb4"
        },
        tooltip: {
          text: '%data-test'
        },
        mediaRules: [{
          maxWidth: 400,
          backgroundColor: 'red'
        }]
      },
      series: [{
          values: [59, 39, 38, 19, 21, 35],
        },
        {
          values: [20, 20, 54, 41, 41, 35],
          lineColor: '#53a534',
          backgroundColor: '#689F38'
        }
      ]
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      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>
  <div id='myChart'></div>
</body>

</html>
    html,
body {
  height: 100%;
  width: 100%;
}

#myChart {
  height: 100%;
  width: 100%;
  min-height: 250px;
}
    let chartConfig = {
  type: 'radar',
  plot: {
    aspect: 'area',
    animation: {
      effect: 3,
      sequence: 1,
      speed: 700
    }
  },
  scaleV: {
    visible: false
  },
  scaleK: {
    values: '0:5:1',
    labels: ['Dogs', 'Cats', 'Fish', 'Birds', 'Reptiles', 'Horses'],
    item: {
      fontColor: '#607D8B',
      backgroundColor: "white",
      borderColor: "#aeaeae",
      borderWidth: 1,
      padding: '5 10',
      borderRadius: 10,
    },
    refLine: {
      lineColor: '#c10000'
    },
    tick: {
      lineColor: '#59869c',
      lineWidth: 2,
      lineStyle: 'dotted',
      size: 20
    },
    guide: {
      lineColor: "#607D8B",
      lineStyle: 'solid',
      alpha: 0.3,
      backgroundColor: "#c5c5c5 #718eb4"
    },
    tooltip: {
      text: '%data-test'
    },
    mediaRules: [{
      maxWidth: 400,
      backgroundColor: 'red'
    }]
  },
  series: [{
      values: [59, 39, 38, 19, 21, 35],
    },
    {
      values: [20, 20, 54, 41, 41, 35],
      lineColor: '#53a534',
      backgroundColor: '#689F38'
    }
  ]
};

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%'
});