Skip to content

09-radar.md

Latest commit

 

History

History
52 lines (47 loc) · 2.03 KB

09-radar.md

File metadata and controls

52 lines (47 loc) · 2.03 KB
Raw
title Radar chart

See the Pen chart.xkcd radar by timqian (@timqian) on CodePen.

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

JS part

const radar = new chartXkcd.Radar(svg, {
  title: 'Letters in random words', // optional
  data: {
    labels: ['c', 'h', 'a', 'r', 't'],
    datasets: [{
      label: 'ccharrrt', // optional
      data: [2, 1, 1, 3, 1],
    }, {
      label: 'chhaart', // optional
      data: [1, 2, 2, 1, 1],
    }],
  },
  options: { // optional
    showLegend: true,
    dotSize: .8,
    showLabels: true,
    legendPosition: chartXkcd.config.positionType.upRight,
  },
});

Customize chart by defining options

  • showLabels: display labels near every line (default false)
  • ticksCount: customize tick numbers you want to see on the main line (default 3)
  • dotSize: you can change size of the dots if you want (default 1)
  • showLegend: display legend near chart (default false)
  • legendPosition: specify where you want to place the legend. (default chartXkcd.config.positionType.upLeft) Possible values:
    • up left: chartXkcd.config.positionType.upLeft
    • up right: chartXkcd.config.positionType.upRight
    • bottom left: chartXkcd.config.positionType.downLeft
    • bottom right: chartXkcd.config.positionType.downRight
  • dataColors: array of colors for different datasets
  • fontFamily: customize font family used in the chart
  • unxkcdify: disable xkcd effect (default false)
  • strokeColor: stroke colors (default black)
  • backgroundColor: color for BG (default white)