05-XY.md

title	XY chart

XY chart is used to plot points by specifying their XY coordinates.

You can also plot XY line chart by connecting the points.

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

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

JS part

  const svg = document.querySelector('.xy-chart');

  new chartXkcd.XY(svg, {
    title: 'Pokemon farms', //optional
    xLabel: 'Coordinate', //optional
    yLabel: 'Count', //optional
    data: {
      datasets: [{
        label: 'Pikachu',
        data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 100 }, { x: 1, y: 2 }, { x: 2, y: 4 }],
      }, {
        label: 'Squirtle',
        data: [{ x: 3, y: 122 }, { x: 4, y: 212 }, { x: -3, y: 100 }, { x: 1, y: 1 }, { x: 1.5, y: 12 }],
      }],
    },
    options: { //optional
      xTickCount: 5,
      yTickCount: 5,
      legendPosition: chartXkcd.config.positionType.upRight,
      showLine: false,
      timeFormat: undefined,
      dotSize: 1,
    },
  });

Customize XY chart by defining options

• xTickCount: customize tick numbers you want to see on the x axis (default 3)
• yTickCount: customize tick numbers you want to see on the y axis (default 3)
• showLegend: display legend near chart (default true)
• 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.upLeft
  • bottom left: chartXkcd.config.positionType.downLeft
  • bottom right: chartXkcd.config.positionType.downRight
• showLine: connect the points with lines (default: false)
• timeFormat: specify the time format if the x values are time (default undefined) chart.xkcd use dayjs to format time, you can find the all the available formats here
• dotSize: you can change size of the dots if you want (default 1)
• 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)

Another example of XY chart: XY line chart with timeFormat

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

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