diff --git a/kpi_dashboard_altair/README.rst b/kpi_dashboard_altair/README.rst
index 9b5050d0d..1571d2f17 100644
--- a/kpi_dashboard_altair/README.rst
+++ b/kpi_dashboard_altair/README.rst
@@ -64,13 +64,23 @@ You need to define a function like::
 You can use `code` in a similar way, as `pandas` and `altair` are already defined
 when using `code` on an `altair` widget.
 
+
+.. image:: https://raw.githubusercontent.com/akretion/reporting-engine/12-altair-readme/kpi_dashboard_altair/static/description/config.png
+
+
+Usage
+=====
+
+
+.. figure:: https://raw.githubusercontent.com/akretion/reporting-engine/12-altair-readme/kpi_dashboard_altair/static/description/graph.png
+
 Bug Tracker
 ===========
 
 Bugs are tracked on `GitHub Issues <https://github.com/OCA/reporting-engine/issues>`_.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us smashing it by providing a detailed and welcomed
-`feedback <https://github.com/OCA/reporting-engine/issues/new?body=module:%20kpi_dashboard_altair%0Aversion:%2012.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
+`feedback <https://github.com/OCA/reporting-engine/issues/new?body=module:%20kpi_dashboard_altair%0Aversion:%2012-altair-readme%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
 
 Do not contact contributors directly about support or help with technical issues.
 
diff --git a/kpi_dashboard_altair/__manifest__.py b/kpi_dashboard_altair/__manifest__.py
index 1fc0a2ceb..e3c8fff1c 100644
--- a/kpi_dashboard_altair/__manifest__.py
+++ b/kpi_dashboard_altair/__manifest__.py
@@ -5,7 +5,7 @@
     "name": "Kpi Dashboard Altair",
     "summary": """
         Create dashboards using altair""",
-    "version": "12.0.1.0.1",
+    "version": "12.0.1.0.2",
     "license": "AGPL-3",
     "author": "Creu Blanca,Odoo Community Association (OCA)",
     "website": "https://github.com/OCA/reporting-engine",
@@ -13,8 +13,9 @@
     "data": ["views/webclient_templates.xml"],
     "qweb": ["static/src/xml/dashboard.xml"],
     "external_dependencies": {
-        "python": ['altair'],
+        "python": ["altair"],
     },
     "demo": ["demo/demo_dashboard_altair.xml"],
+
     "maintainers": ["etobella"],
 }
diff --git a/kpi_dashboard_altair/readme/CONFIGURE.rst b/kpi_dashboard_altair/readme/CONFIGURE.rst
index 382e3d0b4..0023b9184 100644
--- a/kpi_dashboard_altair/readme/CONFIGURE.rst
+++ b/kpi_dashboard_altair/readme/CONFIGURE.rst
@@ -26,3 +26,7 @@ You need to define a function like::
 
 You can use `code` in a similar way, as `pandas` and `altair` are already defined
 when using `code` on an `altair` widget.
+
+
+.. image:: ../static/description/config.png
+
diff --git a/kpi_dashboard_altair/readme/USAGE.rst b/kpi_dashboard_altair/readme/USAGE.rst
new file mode 100644
index 000000000..495eab4ee
--- /dev/null
+++ b/kpi_dashboard_altair/readme/USAGE.rst
@@ -0,0 +1,2 @@
+
+.. figure:: ../static/description/graph.png
diff --git a/kpi_dashboard_altair/static/description/config.png b/kpi_dashboard_altair/static/description/config.png
new file mode 100644
index 000000000..610d3a698
Binary files /dev/null and b/kpi_dashboard_altair/static/description/config.png differ
diff --git a/kpi_dashboard_altair/static/description/graph.png b/kpi_dashboard_altair/static/description/graph.png
new file mode 100644
index 000000000..09c78653b
Binary files /dev/null and b/kpi_dashboard_altair/static/description/graph.png differ
diff --git a/kpi_dashboard_altair/static/description/index.html b/kpi_dashboard_altair/static/description/index.html
index 870ddd41e..0369fd2b9 100644
--- a/kpi_dashboard_altair/static/description/index.html
+++ b/kpi_dashboard_altair/static/description/index.html
@@ -376,11 +376,12 @@ ul.auto-toc {
 <li><a class="reference internal" href="#configure-kpis" id="id2">Configure KPIs</a></li>
 </ul>
 </li>
-<li><a class="reference internal" href="#bug-tracker" id="id3">Bug Tracker</a></li>
-<li><a class="reference internal" href="#credits" id="id4">Credits</a><ul>
-<li><a class="reference internal" href="#authors" id="id5">Authors</a></li>
-<li><a class="reference internal" href="#contributors" id="id6">Contributors</a></li>
-<li><a class="reference internal" href="#maintainers" id="id7">Maintainers</a></li>
+<li><a class="reference internal" href="#usage" id="id3">Usage</a></li>
+<li><a class="reference internal" href="#bug-tracker" id="id4">Bug Tracker</a></li>
+<li><a class="reference internal" href="#credits" id="id5">Credits</a><ul>
+<li><a class="reference internal" href="#authors" id="id6">Authors</a></li>
+<li><a class="reference internal" href="#contributors" id="id7">Contributors</a></li>
+<li><a class="reference internal" href="#maintainers" id="id8">Maintainers</a></li>
 </ul>
 </li>
 </ul>
@@ -414,10 +415,17 @@ class Kpi(models.Model):
 </pre>
 <p>You can use <cite>code</cite> in a similar way, as <cite>pandas</cite> and <cite>altair</cite> are already defined
 when using <cite>code</cite> on an <cite>altair</cite> widget.</p>
+<img alt="https://raw.githubusercontent.com/akretion/reporting-engine/12.0/kpi_dashboard_altair/static/description/config.png" src="https://raw.githubusercontent.com/akretion/reporting-engine/12.0/kpi_dashboard_altair/static/description/config.png" />
+</div>
+</div>
+<div class="section" id="usage">
+<h1><a class="toc-backref" href="#id3">Usage</a></h1>
+<div class="figure">
+<img alt="https://raw.githubusercontent.com/akretion/reporting-engine/12.0/kpi_dashboard_altair/static/description/graph.png" src="https://raw.githubusercontent.com/akretion/reporting-engine/12.0/kpi_dashboard_altair/static/description/graph.png" />
 </div>
 </div>
 <div class="section" id="bug-tracker">
-<h1><a class="toc-backref" href="#id3">Bug Tracker</a></h1>
+<h1><a class="toc-backref" href="#id4">Bug Tracker</a></h1>
 <p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/reporting-engine/issues">GitHub Issues</a>.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us smashing it by providing a detailed and welcomed
@@ -425,21 +433,21 @@ If you spotted it first, help us smashing it by providing a detailed and welcome
 <p>Do not contact contributors directly about support or help with technical issues.</p>
 </div>
 <div class="section" id="credits">
-<h1><a class="toc-backref" href="#id4">Credits</a></h1>
+<h1><a class="toc-backref" href="#id5">Credits</a></h1>
 <div class="section" id="authors">
-<h2><a class="toc-backref" href="#id5">Authors</a></h2>
+<h2><a class="toc-backref" href="#id6">Authors</a></h2>
 <ul class="simple">
 <li>Creu Blanca</li>
 </ul>
 </div>
 <div class="section" id="contributors">
-<h2><a class="toc-backref" href="#id6">Contributors</a></h2>
+<h2><a class="toc-backref" href="#id7">Contributors</a></h2>
 <ul class="simple">
 <li>Enric Tobella &lt;<a class="reference external" href="mailto:etobella&#64;creublanca.es">etobella&#64;creublanca.es</a>&gt;</li>
 </ul>
 </div>
 <div class="section" id="maintainers">
-<h2><a class="toc-backref" href="#id7">Maintainers</a></h2>
+<h2><a class="toc-backref" href="#id8">Maintainers</a></h2>
 <p>This module is maintained by the OCA.</p>
 <a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a>
 <p>OCA, or the Odoo Community Association, is a nonprofit organization whose