docs: add cube branding (#776)

* feat: add cube branding and change readme style

* feat: change readme data

* feat: change readme data part2

* feat: change readme data part3

Author: thabarbados

README.md

@@ -1,10 +1,14 @@
-<div align="center">
-  <img width="256" heigth="256" src="/assets/vue-chartjs.png" alt="vue-chartjs logo">
-</div>
+# vue-chartjs
+
+<img align="right" width="150" height="150" alt="vue-chartjs logo" src="/assets/vue-chartjs.png">
+
+**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.
+
+Supports Chart.js v3 and v2.
 
 [![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs)
 [![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs)
-[![Build Status](https://travis-ci.org/apertureless/vue-chartjs.svg?branch=master)](https://travis-ci.org/apertureless/vue-chartjs)
+[![Build Status](https://img.shields.io/github/workflow/status/apertureless/vue-chartjs/CI.svg)](https://github.com/apertureless/vue-chartjs/actions)
 [![Package Quality](http://npm.packagequality.com/shield/vue-chartjs.svg)](http://packagequality.com/#?package=vue-chartjs)
 [![npm](https://img.shields.io/npm/dm/vue-chartjs.svg)](https://www.npmjs.com/package/vue-chartjs)
 [![Gitter chat](https://img.shields.io/gitter/room/TechnologyAdvice/Stardust.svg)](https://gitter.im/vue-chartjs/Lobby)
@@ -14,16 +18,22 @@
 [![Donate](assets/donate.svg)](https://www.paypal.me/apertureless/50eur)
 [![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C1WP7C)
 
-# vue-chartjs
-
-**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.
-
-Supports Chart.js v3 and v2.
-
-## Demo & Docs
-
-- 📺 [Demo](http://demo.vue-chartjs.org/)
-- 📖 [v3 Docs](http://vue-chartjs.org/)
+<br />
+<a href="#install">Install</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="#docs">Docs</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="#how-to-use">How to use</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="#migration-to-v4">Migration to v4</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="#demo">Demo</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="https://slack.cube.dev/?ref=eco-vue-chartjs">Slack</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="https://stackoverflow.com/questions/tagged/vue-chartjs">Stack Overflow</a>
+<br />
+<hr />
 
 ## Install
 
@@ -39,6 +49,18 @@ npm i vue-chartjs chart.js
 
 We recommend using `chart.js@^3.0.0`.
 
+<hr />
+
+Need an API to fetch data? Consider [Cube](https://cube.dev/?ref=eco-vue-chartjs), an open-source API for data apps.
+
+<br />
+
+[![supported by Cube](https://user-images.githubusercontent.com/986756/154330861-d79ab8ec-aacb-4af8-9e17-1b28f1eccb01.svg)](https://cube.dev/?ref=eco-vue-chartjs)
+
+## Docs
+
+- 📖 [v3 Docs](http://vue-chartjs.org/)
+
 ## How to use
 
 This package works with version 2.x and 3.x of Vue.
@@ -49,7 +71,7 @@ Import the component.
 import { Bar } from 'vue-chartjs'
 ```
 
-For Vue 2 projects, you need to import from 'vue-chartjs/legacy'.
+For Vue 2 projects, you need to import from `vue-chartjs/legacy`.
 
 ```javascript
 import { Bar } from 'vue-chartjs/legacy'
@@ -238,7 +260,7 @@ import { Bar } from 'vue-chartjs'
 v4 — tree-shakable way:
 
 ```javascript
-import { Bar } from 'vue-chartjs/legacy'
+import { Bar } from 'vue-chartjs'
 import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
 
 ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
@@ -249,7 +271,7 @@ Using the "lazy way" is okay to simplify the migration, but please consider usin
 Please note that typed chart components register their controllers by default, so you don't need to register them by yourself. For example, when using the Pie component, you don't need to register PieController explicitly.
 
 ```javascript
-import { Pie } from 'vue-chartjs/legacy'
+import { Pie } from 'vue-chartjs'
 import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'
 
 ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
@@ -353,7 +375,7 @@ export default {
 }
 ```
 
-v4 charts have data change watcher by default. v4 will update or re-render the chart if new data is passed.
+v4 charts have data change watcher by default. v4 will update or re-render the chart if new data is passed. Mixins have been removed.
 
 v4:
 
@@ -379,6 +401,10 @@ export default {
 </script>
 ```
 
+## Demo
+
+- 📺 [Demo](http://demo.vue-chartjs.org/)
+
 ## Available Charts
 
 ### Bar Chart