kmh-vue-charts

Project setup

npm i @kmhgmbh/kmh-vue-chart

Integration

import Vue from 'vue'
import App from './App.vue'
import KmhVueChart from '@kmhgmbh/kmh-vue-chart';

Vue.use(KmhVueChart);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Usage

<pie-chart :dataset="data.dataset" :labels="data.labels" :options="pieOptions"/>
<stacked-bar-chart :dataset="data.dataset" :labels="data.labels" :options="stackedOptions"/>

Config Options

const pieOptions = {
  plugins: {
    datalabels: {
      color: '#848484',
      formatter: value => {
        return value + '%';
      },
    },
  },
  layout: {
    padding: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
  },
  legend: {
    display: true,
    position: 'bottom',
    labels: {
      fontSize: 13,
    },
  },
  scales: {
    xAxes: [
      {
        display: false,
      },
    ],
    yAxes: [
      {
        display: false,
      },
    ],
  },
};
const stackedOptions = {
  plugins: {
    datalabels: {
      color: '#848484',
      formatter: value => {
        return value + '%';
      },
    },
  },
  layout: {
    padding: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
  },
  legend: {
    display: true,
    position: 'bottom',
    labels: {
      fontSize: 13,
    },
  },
  scales: {
    xAxes: [
      {
        stacked: true,
        visible: false,
      },
    ],
    yAxes: [
      {
        ticks: {
          callback: label => {
            return label + '%';
          },
        },
        stacked: true,
      },
    ],
  },
};

module.exports = {
  pieOptions,
  stackedOptions,
};

Example

<template>
  <div id="app">
    <h3>Adressen</h3>
    <div grid>
      <div chart-container>
        <pie-chart
          :dataset="anschluesse.dataset"
          :labels="anschluesse.labels"
          :options="pieOptions"
        />
      </div>
      <div chart-container>
        <stacked-bar-chart
          :dataset="zieleAdressen.dataset"
          :labels="zieleAdressen.labels"
          :options="stackedOptions"
        />
      </div>
    </div>
    <hr>
    <h3>Haushalte</h3>
    <div grid>
      <div chart-container>
        <pie-chart :dataset="produkte.dataset" :labels="produkte.labels" :options="pieOptions"/>
      </div>
      <div chart-container>
        <stacked-bar-chart
          :dataset="zieleHaushalte.dataset"
          :labels="zieleHaushalte.labels"
          :options="stackedOptions"
        />
      </div>
    </div>
  </div>
</template>

<script>

import ChartJsPluginDataLabels from 'chartjs-plugin-datalabels';
import { pieOptions, stackedOptions } from "./assets/chart-options";
export default {
  name: "app",
  data() {
    return {
      pieOptions: pieOptions,
      stackedOptions: stackedOptions,
      anschluesse: {
        labels: ["Adressen", "Anschlussaufträge"],
        dataset: [
          {
            data: [49, 38],
            backgroundColor: ["#004694", "#ffd203"],
            borderWidth: 0
          }
        ]
      },
      produkte: {
        labels: ["Haushalte", "Produktaufträge"],
        dataset: [
          {
            data: [63, 30],
            backgroundColor: ["#004694", "#ffd203"],
            borderWidth: 0
          }
        ]
      },
      zieleAdressen: {
        labels: ["Adressen Zielerreichung"],
        dataset: this.gibZiele(60)
      },
      zieleHaushalte: {
        labels: ["Haushalte Zielerreichung"],
        dataset: this.gibZiele(130)
      }
    };
  },
  methods: {
    gibZiele(value) {
      if (value > 100) {
        const secondBar = value - 100;
        return [
          {
            label: "bis 100%",
            backgroundColor: "#004694",
            data: [100]
          },
          {
            label: "über 100%",
            backgroundColor: "#ffd203",
            data: [secondBar]
          }
        ];
      } else {
        return [
          {
            label: "bis 100%",
            backgroundColor: "#004694",
            data: [value]
          }
        ];
      }
    }
  }
};
</script>

<style>
#app {
  margin: 50px;
  width: min-content;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: #393333;
}

[grid] {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
}

[chart-container] {
  position: relative;
  width: 200px;
  height: 200px;
}
</style>