KevinMidboe/vue-chartjs
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-chartjs.git synced 2025-10-29 18:00:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

📝 Update README and assets

Browse Source
This commit is contained in:
Jakub Juszczak
2017-07-02 17:02:34 +02:00
parent 9b8e961d1c
commit ba5cedc981
11 changed files with 76 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/examples/App.vue
View File

@@ -1,25 +1,54 @@
<template>
<div class="container">
<h1 style="text-align:center;margin:40px 0;">Barchart</h1>
<bar-example></bar-example>
<h1 style="text-align:center;margin:40px 0;">Barchart with reactive mixing for live data</h1>
<reactive-example></reactive-example>
<h1 style="text-align:center;margin:40px 0;">Barchart with reactive mixing for live data as props</h1>
<reactive-prop-example :chart-data="dataPoints"></reactive-prop-example>
<h1 style="text-align:center;margin:40px 0;">Linechart</h1>
<line-example></line-example>
<h1 style="text-align:center;margin:40px 0;">Doughnutchart</h1>
<doughnut-example></doughnut-example>
<h1 style="text-align:center;margin:40px 0;">Piechart</h1>
<pie-example></pie-example>
<h1 style="text-align:center;margin:40px 0;">Radarchart</h1>
<radar-example></radar-example>
<h1 style="text-align:center;margin:40px 0;">Polararea</h1>
<polar-area-example></polar-area-example>
<h1 style="text-align:center;margin:40px 0;">Bubblechart</h1>
<bubble-example></bubble-example>
<h1 style="text-align:center;margin:40px 0;">Scatter Chart</h1>
<scatter-example></scatter-example>
<div class="Chart">
<h1 style="text-align:center;">Barchart</h1>
<bar-example></bar-example>
</div>
<div class="Chart">
<h1 style="text-align:center;">Barchart with reactive mixing for live data</h1>
<reactive-example></reactive-example>
</div>
<div class="Chart">
<h1 style="text-align:center;">Barchart with reactive mixing for live data as props</h1>
<reactive-prop-example :chart-data="dataPoints"></reactive-prop-example>
</div>
<div class="Chart">
<h1 style="text-align:center;">Linechart</h1>
<line-example></line-example>
</div>
<div class="Chart">
<h1 style="text-align:center;">Doughnutchart</h1>
<doughnut-example></doughnut-example>
</div>
<div class="Chart">
<h1 style="text-align:center;">Piechart</h1>
<pie-example></pie-example>
</div>
<div class="Chart">
<h1 style="text-align:center;">Radarchart</h1>
<radar-example></radar-example>
</div>
<div class="Chart">
<h1 style="text-align:center;">Polararea</h1>
<polar-area-example></polar-area-example>
</div>
<div class="Chart">
<h1 style="text-align:center;">Bubblechart</h1>
<bubble-example></bubble-example>
</div>
<div class="Chart">
<h1 style="text-align:center;">Scatter Chart</h1>
<scatter-example></scatter-example>
</div>
</div>
</template>
@@ -83,4 +112,21 @@
max-width: 800px;
margin: 0 auto;
}
h1 {
font-family: 'Helvetica', Arial;
color: #464646;
text-transform: uppercase;
border-bottom: 1px solid #f1f1f1;
padding-bottom: 15px;
font-size: 28px;
margin-top: 0;
}
.Chart {
padding: 20px;
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, .4);
border-radius: 20px;
margin: 50px 0;
}
</style>