Added Fixed dimensions (#14)

* Added fixed with and height props

* Upped version number

* Updated travis-ci url

Author: J-T-McC

README.md

@@ -1,7 +1,7 @@
 # Vue3 ChartJS Wrapper
 
 [![Coverage Status](https://coveralls.io/repos/github/J-T-McC/vue3-chartjs/badge.svg?branch=main)](https://coveralls.io/github/J-T-McC/vue3-chartjs?branch=main)
-[![Build Status](https://travis-ci.com/J-T-McC/vue3-chartjs.svg?branch=main)](https://travis-ci.com/J-T-McC/vue3-chartjs)
+[![Build Status](https://travis-ci.com/J-T-McC/vue3-chartjs.svg?branch=main)](https://app.travis-ci.com/github/J-T-McC/vue3-chartjs)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/J-T-McC/vue3-chartjs/pulls)
 ![npm](https://img.shields.io/npm/dt/@j-t-mcc/vue3-chartjs)
 
@@ -26,12 +26,24 @@ npm install chart.js @j-t-mcc/vue3-chartjs
 
 Component props use the same structure as ChartJS arguments and are passed as-is to the instance of ChartJS.
 
+ChartJS charts are responsive by default. If you wish to have a fixed sized chart, you can set the optional `height` and `width` properties, paired with setting responsive to `false` in the `options` property.  
+
 ```js
   props: {
     type: {
-      type: String,
+      type: String, 
       required: true
     },
+    height: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    width: {
+      type: Number,
+      required: false,
+      default: null
+    },
     data: {
       type: Object,
       required: true

lib/Vue3ChartJs.vue

@@ -61,6 +61,16 @@ const Vue3ChartJs = defineComponent({
       type: String,
       required: true
     },
+    height: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    width: {
+      type: Number,
+      required: false,
+      default: null
+    },
     data: {
       type: Object,
       required: true
@@ -136,9 +146,11 @@ const Vue3ChartJs = defineComponent({
     }
   },
 
-  render () {
+  render (props) {
     return h('canvas', {
-      ref: 'chartRef'
+      ref: 'chartRef',
+      height: props.height,
+      width: props.width
     })
   }
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j-t-mcc/vue3-chartjs",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "author": "Tyson McCarney <info@tysonmccarney.com> (https://tysonmccarney.com)",
   "description": "Vue3 wrapper for Chart.js",
   "license": "MIT",

src/App.vue

@@ -1,16 +1,12 @@
 <template>
-  <div style="height:600px;width: 600px;">
-
-    <div style="width: 500px">
+    <div style="width: 100%;height:20%;display: block;">
       <vue3-chart-js v-bind="{...barChart}"  @after-update="afterUpdate"/>
     </div>
-    <div style="width: 500px">
+    <div style="display: block;">
       <vue3-chart-js ref="chartRef" v-bind="{...localDoughnutChartOptions}" @after-update="afterUpdate"/>
     </div>
     <button type="submit" @click="updateChart">Update Doughnut Data</button>
     <button type="submit" @click="exportChart">Export Chart as PNG</button>
-
-  </div>
 </template>
 
 <script>
@@ -37,11 +33,18 @@ export default {
         }]
       },
       options: {
+        maintainAspectRatio: false,
         plugins: {
           zoom: {
             zoom: {
-              enabled: true,
-              mode: 'xy',
+              wheel: {
+                enabled: true,
+                mode: 'xy',
+              },
+              pinch: {
+                enabled: true,
+                mode: 'xy',
+              }
             }
           }
         }
@@ -51,6 +54,8 @@ export default {
     const doughnutChart = {
       id: 'doughnut',
       type: 'doughnut',
+      height: 800,
+      width: 800,
       data: {
         labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
         datasets: [
@@ -66,6 +71,7 @@ export default {
         ]
       },
       options: {
+        responsive: false,
         cutout: '10%',
         plugins: {}
       }

test/wrapper.test.js

@@ -50,6 +50,18 @@ describe('init', () => {
   })
 })
 
+describe('chart dimensions', () => {
+  it('it sets fixed height and width', async () => {
+    const props = getDoughnutProps()
+    props.options.responsive = false
+    props.width = props.height = 800
+    const wrapper = factory(props)
+    wrapper.vm.render()
+    expect(wrapper.vm.chartJSState.chart.height).toEqual(800)
+    expect(wrapper.vm.chartJSState.chart.width).toEqual(800)
+  })
+})
+
 describe('chart reloading', () => {
   it('reloads if already exists', async () => {
     const wrapper = factory(getDoughnutProps())