Update README

README.md

@@ -1,5 +1,4 @@
-vue-chartist
-==============
+# vue-chartist
 
 Plugin [Vuejs](http://vuejs.org/) for [Chartist.js](https://gionkunz.github.io/chartist-js)
 
@@ -11,78 +10,91 @@ npm install vue-chartist
 
 ## Setup
 
-__This package include Chartist's javascript but not the stylesheet__
+**This package include Chartist's javascript but not the stylesheet**
+
 ```javascript
-Vue.use(require('vue-chartist'))
+const Vue = require("vue")
+const vueChartist = require("../../index.js")
+Vue.createApp({}).use(vueChartist)
 ```
 
 ## Usage
 
 In your HTML, add `<chartist>` tag. This tag take the following attributes :
 
-- __ratio__ - `String`
-class ratio of Chartist, see values on [Chartist web site](https://gionkunz.github.io/chartist-js/getting-started.html#as-simple-as-it-can-get)
+- **ratio** - `String`
+  class ratio of Chartist, see values on [Chartist web site](https://gionkunz.github.io/chartist-js/getting-started.html#as-simple-as-it-can-get)
+
+- **type** - `String` (required)
+  chart type, possible values : - `Line` - `Bar` - `Pie`
 
-- __type__ - `String` (required)
-chart type, possible values :
-    - `Line`
-    - `Bar`
-    - `Pie`
+- **data** - `Object`
+  data object like this
 
-- __data__ -  `Object`
-data object like this
 ```javascript
 const data = {
-    labels: ["A", "B", "C"],
-    series:[[1, 3, 2], [4, 6, 5]]
+  labels: ["A", "B", "C"],
+  series: [
+    [1, 3, 2],
+    [4, 6, 5],
+  ],
 }
 ```
 
-- __options__ - `Object`
-options object, see defaultOptions on [API Documentation](https://gionkunz.github.io/chartist-js/api-documentation.html)
+- **options** - `Object`
+  options object, see defaultOptions on [API Documentation](https://gionkunz.github.io/chartist-js/api-documentation.html)
+
+- **event-handlers** - `Array`
+  a special array to use `chart.on(event, function)`
 
-- __event-handlers__ - `Array`
-a special array to use `chart.on(event, function)`
 ```javascript
-const eventHandlers = [{
-    event: 'draw',
+const eventHandlers = [
+  {
+    event: "draw",
     fn() {
-        //animation
-    }
-}, {
+      //animation
+    },
+  },
+  {
     //an other event hander
-}]
+  },
+]
 ```
 
-- __responsive-options__ - `Array`
-object for responsive options
+- **responsive-options** - `Array`
+  object for responsive options
 
 ## Example
 
 ```html
 <chartist
-    ratio="ct-major-second"
-    type="Line"
-    :data="chartData"
-    :options="chartOptions" >
+  ratio="ct-major-second"
+  type="Line"
+  :data="chartData"
+  :options="chartOptions"
+>
 </chartist>
 ```
 
->*Note: think about using the [dynamic props](http://vuejs.org/guide/components.html#Dynamic_Props) of Vuejs to bind easliy your data or other.*
+> _Note: think about using the [dynamic props](http://vuejs.org/guide/components.html#Dynamic_Props) of Vuejs to bind easliy your data or other._
 
 ```javascript
-new Vue({
-    el:'#app',
-    data: {
-        chartData: {
-            labels: ["A", "B", "C"],
-            series:[[1, 3, 2], [4, 6, 5]]
-        },
-        chartOptions: {
-            lineSmooth: false
-        }
-    }
+Vue.createApp({
+  data: {
+    chartData: {
+      labels: ["A", "B", "C"],
+      series: [
+        [1, 3, 2],
+        [4, 6, 5],
+      ],
+    },
+    chartOptions: {
+      lineSmooth: false,
+    },
+  },
 })
+  .use(vueChartist)
+  .mount("#app")
 ```
 
 ## Customize chart with no data
@@ -91,20 +103,25 @@ If chart data are empty or not definied the plugin add `ct-nodata` (or a custom
 That way, you can customize your element with CSS when you have no data to display. To choose your message use the options plugin.
 
 ## Options Plugin
+
 ```javascript
-Vue.use(require('vue-chartist'), {
-    messageNoData: "You have not enough data",
-    classNoData: "empty"
+app.use(require("vue-chartist"), {
+  messageNoData: "You have not enough data",
+  classNoData: "empty",
 })
 ```
 
 ## Chartist instance
+
 There is two way to access this Chartist's instance :
 By `Vue` instance
+
 ```javascript
 Vue.chartist
 ```
+
 or in component
+
 ```javascript
 this.$chartist
 ```