Merge pull request ChartsCSS#12 from ramiy/main

Cheatsheet: Charts.css 0.9.0 Anatomy

Author: ramiy

src/.vuepress/public/assets/pdf/charts-css-anatomy-0-9-0.pdf

@@ -717,9 +717,9 @@ To add informative titles for your axes, you can use `<table>` tags. To add axis
   justify-items: center;
   grid-template-columns: 50px 1fr;
   grid-template-rows: 250px 50px;
-  grid-template-areas: 
-    "data-axis    chart"
-    "primary-axis primary-axis";
+  grid-template-areas:
+    "data-axis chart"
+    ".         primary-axis";
 }
 #my-chart > table {
   grid-area: chart;
@@ -742,9 +742,9 @@ To add informative titles for your axes, you can use `<table>` tags. To add axis
   justify-items: center;
   grid-template-columns: 50px 1fr;
   grid-template-rows: 250px 50px;
-  grid-template-areas: 
-    "data-axis    chart"
-    "primary-axis primary-axis";
+  grid-template-areas:
+    "data-axis chart"
+    ".         primary-axis";
   background-color: #eee;
   width: 650px;
 }

src/components/axes.md

@@ -53,7 +53,7 @@ To make the bars look like 3D bars is pretty simple. It can be done using CSS `b
 }
 </template>
 <template v-slot:html-code>
-<table class="charts-css column hide-data show-data-axes" id="effect-example-1">
+<table class="charts-css column hide-data" id="effect-example-1">
 
   <caption> 3D Effect Example #1 </caption>
 
@@ -157,7 +157,7 @@ Or using `:before` and `:after` psedo-elements with `skew` property.
 }
 </template>
 <template v-slot:html-code>
-<table class="charts-css column hide-data show-data-axes" id="effect-example-2">
+<table class="charts-css column hide-data" id="effect-example-2">
 
   <caption> 3D Effect Example #2 </caption>
 
@@ -229,7 +229,7 @@ To make the bars look like 3D cylinders you can use the `border-radius` property
 }
 </template>
 <template v-slot:html-code>
-<table class="charts-css column hide-data show-data-axes" id="effect-example-3">
+<table class="charts-css column hide-data" id="effect-example-3">
 
   <caption> 3D Effect Example #3 </caption>
 
@@ -318,7 +318,7 @@ Another way to make your chart look 3D is to tilt the entire `<table>` with css
 }
 </template>
 <template v-slot:html-code>
-<table class="charts-css column show-data-axes" id="effect-example-4">
+<table class="charts-css column" id="effect-example-4">
 
   <caption> 3D Effect Example #4 </caption>
 
@@ -396,7 +396,7 @@ Or tilting the other way the cylinder bars with a nice linear gradient and some
 }
 </template>
 <template v-slot:html-code>
-<table class="charts-css column hide-data show-data-axes" id="effect-example-5">
+<table class="charts-css column hide-data" id="effect-example-5">
 
   <caption> 3D Effect Example #5 </caption>
 
@@ -476,7 +476,7 @@ We can also use the webkit reflect effect to highlight the chart
 }
 </template>
 <template v-slot:html-code>
-<table class="charts-css column labels-hide show-data-axes" id="effect-example-6">
+<table class="charts-css column labels-hide" id="effect-example-6">
 
   <caption> 3D Effect Example #6 </caption>
 

src/customization/3d-effects.md

@@ -120,7 +120,7 @@ Here is another simple examples with labels (`<th>` elements) spinning every 3 s
 }
 </template>
 <template v-slot:html-code>
-<table class="charts-css bar hide-data show-labels data-spacing-5 show-primary-axis show-data-axes" id="animations-example-2">
+<table class="charts-css bar hide-data show-labels data-spacing-5 show-primary-axis" id="animations-example-2">
 
   <caption> Animation Example #2 - The Richest People In America (Forbes 1918) </caption>
 
@@ -204,7 +204,7 @@ Another example with moving bars. Revealing themselves from the bottom.
 }
 </template>
 <template v-slot:html-code>
-<table class="charts-css column show-labels hide-data data-spacing-5 show-primary-axis show-data-axes" id="animations-example-3">
+<table class="charts-css column show-labels hide-data data-spacing-5 show-primary-axis" id="animations-example-3">
 
   <caption> Animation Example #3 </caption>
 
@@ -272,7 +272,7 @@ The same can be done with less code using `scale()`;
 }
 </template>
 <template v-slot:html-code>
-<table class="charts-css column show-labels hide-data data-spacing-5 show-primary-axis show-data-axes" id="animations-example-4">
+<table class="charts-css column show-labels hide-data data-spacing-5 show-primary-axis" id="animations-example-4">
 
   <caption> Animation Example #4 </caption>
 
@@ -351,7 +351,7 @@ A useful example to highlighting individual items with animations.
 }
 </template>
 <template v-slot:html-code>
-<table class="charts-css column show-labels data-spacing-15 show-primary-axis show-data-axes" id="animations-example-5">
+<table class="charts-css column show-labels data-spacing-15 show-primary-axis" id="animations-example-5">
 
   <caption> Animation Example #5 </caption>
 
@@ -439,7 +439,7 @@ Now lets animate the colors with gradients.
 }
 </template>
 <template v-slot:html-code>
-<table class="charts-css column show-labels hide-data data-spacing-5 show-primary-axis show-data-axes" id="animations-example-6">
+<table class="charts-css column show-labels hide-data data-spacing-5 show-primary-axis" id="animations-example-6">
 
   <caption> Animation Example #6 </caption>