import Chart from 'chart.js';
import Vue from 'vue/dist/vue.esm'
import MatestackUiCore from 'matestack-ui-core';
Vue.component('chart-js-component', {
mixins: [MatestackUiCore.componentMixin],
chartJsInstance: undefined,
getThemeColor: function(key){
const style = getComputedStyle(document.body);
return style.getPropertyValue('--bs-'+key);
getThemeColorArray: function(keysArray){
const style = getComputedStyle(document.body);
keysArray.forEach(function(key){
result.push(style.getPropertyValue('--bs-'+key))
drawBarChart: function(chartElement){
this.props["datasets"].forEach(function(item){
if (item["backgroundColor"] === undefined){
item["backgroundColor"] = self.getThemeColor("primary")
if(Array.isArray(item["backgroundColor"])){
item["backgroundColor"] = self.getThemeColorArray(item["backgroundColor"])
item["backgroundColor"] = self.getThemeColor(item["backgroundColor"])
item["hoverBackgroundColor"] = "rgba(0, 0, 0, 0.1)"
if (item["barThickness"] === undefined){
item["barThickness"] = 10;
this.chartJsInstance = new Chart(chartElement, {
labels: this.props["labels"],
datasets: this.props["datasets"]
display: this.props["display_legend"],
display: this.props["display_y_axes"],
display: this.props["display_x_axes"],
drawLineChart: function(chartElement){
this.props["datasets"].forEach(function(item){
if (item["borderColor"] === undefined){
item["borderColor"] = self.getThemeColor("primary")
item["borderColor"] = self.getThemeColor(item["borderColor"])
item["hoverBackgroundColor"] = "rgba(0, 0, 0, 0.1)"
if (item["fill"] === undefined){
this.chartJsInstance = new Chart(chartElement, {
labels: this.props["labels"],
datasets: this.props["datasets"]
display: this.props["display_legend"],
display: this.props["display_y_axes"],
display: this.props["display_x_axes"],
drawDoughnutChart: function(chartElement){
this.props["datasets"].forEach(function(item){
if (item["backgroundColor"] === undefined){
item["backgroundColor"] = self.getThemeColor("primary")
if(Array.isArray(item["backgroundColor"])){
item["backgroundColor"] = self.getThemeColorArray(item["backgroundColor"])
item["backgroundColor"] = self.getThemeColor(item["backgroundColor"])
item["hoverBackgroundColor"] = "rgba(0, 0, 0, 0.1)"
if (item["borderColor"] === undefined){
item["borderColor"] = self.getThemeColor("white")
item["borderColor"] = self.getThemeColor(item["borderColor"])
if (item["hoverBorderColor"] === undefined){
item["hoverBorderColor"] = self.getThemeColor("white")
item["hoverBorderColor"] = self.getThemeColor(item["hoverBorderColor"])
if (item["borderWidth"] === undefined){
if (item["weight"] === undefined){
this.chartJsInstance = new Chart(chartElement, {
labels: this.props["labels"],
datasets: this.props["datasets"]
display: this.props["display_legend"],
cutoutPercentage: this.props["cutout_percentage"]
drawPieChart: function(chartElement){
this.props["datasets"].forEach(function(item){
if (item["backgroundColor"] === undefined){
item["backgroundColor"] = self.getThemeColor("primary")
if(Array.isArray(item["backgroundColor"])){
item["backgroundColor"] = self.getThemeColorArray(item["backgroundColor"])
item["backgroundColor"] = self.getThemeColor(item["backgroundColor"])
item["hoverBackgroundColor"] = "rgba(0, 0, 0, 0.1)"
this.chartJsInstance = new Chart(chartElement, {
labels: this.props["labels"],
datasets: this.props["datasets"]
display: this.props["display_legend"],
const style = getComputedStyle(document.body);
this.defaultColor = style.getPropertyValue('--bs-primary');
this.fontColor = style.getPropertyValue('--bs-secondary');
this.fontFamily = style.getPropertyValue('--bs-font-sans-serif');
Chart.defaults.global.defaultFontColor = this.fontColor
Chart.defaults.global.defaultFontFamily = this.fontFamily
Chart.defaults.global.defaultColor = this.fontFamily
const chartElement = this.$refs.chart
if(this.props["type"] == "bar"){
this.drawBarChart(chartElement);
if(this.props["type"] == "line"){
this.drawLineChart(chartElement);
if(this.props["type"] == "doughnut"){
this.drawDoughnutChart(chartElement);
if(this.props["type"] == "pie"){
this.drawPieChart(chartElement);