Vue-chartjs: Custom chart types

[leevigraham]

Is it possible to extend the line chart type to create a slightly different chart. For example: https://jsfiddle.net/haq5k2mw/

[apertureless]

Hey @leevigraham
right now it is not possible.

However I think this could be implemented quite easy, if we export the generateChart function.

So you maybe could do something like this:

import Chart from 'chart.js'
import { generateChart } from 'vue-chartjs'

Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({ /* custom magic here */})

const CustomLine = generateChart('custom-line', LineWithLine)

export default {
  extends: CustomLine,
...
}

However I am not really sure if it will work out. Will test it and report back :3

[leevigraham]

Nice :)

[apertureless]

It's now available in v3.3.0

Example

// 1. Import Chart.js so you can use the global Chart object
import Chart from 'chart.js'
// 2. Import the `generateChart()` method to create the vue component.
import { generateChart } from 'vue-chartjs'

// 3. Extend on of the default charts
// http://www.chartjs.org/docs/latest/developers/charts.html
Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({ /* custom magic here */})

// 4. Generate the vue-chartjs component
// First argument is the chart-id, second the chart type.
const CustomLine = generateChart('custom-line', 'LineWithLine')

// 5. Extend the CustomLine Component just like you do with the default vue-chartjs charts.

export default {
  extends: CustomLine,
  mounted () {
    // ....
  }
}

[sontd-0882]

@apertureless
I do the same as example below

// 1. Import Chart.js so you can use the global Chart object
import Chart from 'chart.js'
// 2. Import the `generateChart()` method to create the vue component.
import { generateChart } from 'vue-chartjs'

// 3. Extend on of the default charts
// http://www.chartjs.org/docs/latest/developers/charts.html
Chart.defaults.LineWithLine = Chart.defaults.line
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
  draw(ease) {
    Chart.controllers.line.prototype.draw.call(this, ease)
    /* custom logic */
  }
})

// 4. Generate the vue-chartjs component
// First argument is the chart-id, second the chart type.
const CustomLine = generateChart('custom-line', 'LineWithLine')

// 5. Extend the CustomLine Component just like you do with the default vue-chartjs charts.
export default {
  extends: CustomLine,
  props: ['chartdata', 'options'],
  mounted () {
    this.renderChart(this.chartdata, this.options)
  }
}

but got an error

Error: "LineWithLine" is not a chart type.

[apertureless]

@sontd-0882

Which version of chart.js are you using ? This will only work for chart.js < 3.0, because chart.js 3.0 is currently not supported by vue-chartjs.

[sontd-0882]

@apertureless Thanks for replying.

• chart.js v2.9.4
• vue-chartjs v3.5.1

---

Found the reason, the error was raised from chartjs-plugin-style.

import 'chartjs-plugin-style'