chart.xkcd-vue

what's chart.xkcd?

You can find the documentation for the chats configurations in the official library page.

Install

You must install chart.xkcd.

npm i -S chart.xkcd

① NPM

npm i -S chart.xkcd-vue

② script

You can install chart.xkcd via script tag in HTML or via npm

Use

Register components at the main entry.

① Register all components


   import Vue from 'vue'
   import chartXkcdVue from 'chart.xkcd-vue'

   // ↓↓↓ will auto register all chart.xkcd component.
   Vue.use(chartXkcdVue)

② Register a single component


  import Vue from 'vue'
  import chartXkcd from 'chart.xkcd'
  import { genComponent } from 'chart.xkcd-vue'
  Vue.component('chartxkcd-line', genComponent(chartXkcd, 'chartxkcd-line'))

Used in templates.

chartxkcd-line

code

config:

Customize chart by defining options

  • yTickCount: customize tick numbers you want to see on the y axis (default 3)
  • legendPosition: specify where you want to place the legend. (default chartXkcd.config.positionType.upLeft) Possible values:
    • up left: chart.Xkcd.positionType.upLeft
    • up right: chart.Xkcd.positionType.upLeft

chartxkcd-xy

code

config:

Customize 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)
  • legendPosition: specify where you want to place the legend (default chartXkcd.config.positionType.upLeft) Possible values:
    • up left: chart.Xkcd.positionType.upLeft
    • up right: chart.Xkcd.positionType.upLeft
  • 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)

chartxkcd-bar

code

config:

Customize chart by defining options

  • yTickCount: customize tick numbers you want to see on the y axis

chartxkcd-pie

config:

Customize chart by defining options

  • innerRadius: specify empty pie chart radius (default: 0.5)
    • Want a pie chart? set innerRadius to 0
  • legendPosition: specify where you want to place the legend. (default chartXkcd.config.positionType.upLeft) Possible values:
    • up left: chart.Xkcd.positionType.upLeft
    • up right: `chart.Xkcd.positionType.upLeft