Default Settings

---

HTML Code

Source Code

						<!--HTML Chart in Panel -->

						<div class="row mg-t-30">
							<div class="col-xl-12 ">
								<div class="widget-2">
									<div class="card panel shadow-base overflow-hidden">
										<div class="modal-header row">
											<div class="col-12"><h2 class="">Heading</h2></div>
										</div>
										<hr class="panel">
										<!-- card-header -->
											<div class="row">
												<div class="col-12" id="app">
													<chart class="ht-250"></chart>
												</div>
											</div>
										<!-- card-body -->
									</div>
								</div>
							</div>
						</div>



						<!--HTML Chart in Card -->

			<div class="row">
				<div class="col-xl-3 widget-2 mg-t-20 show-icon">
					<div class="card shadow-base overflow-hidden ht-220">
							<div class="card-header mg-t-5 mg-b-5 row">
								<div class="col"><h3>Heading</h3></div>
							</div>
						<hr>
						<!-- card-header -->
						<div class="card-body pd-0">
							<div class="row no-gutters row-cols-2 mg-x-10">
								<div class="col-5 mg-t-7"> <span>€ 8.252,59 Prov.<br>
                  € 39.522,59 Val.</span> </div>
								<div class="col-7">
									<h6 class="tx-right"><i class="tx-22 pd-0 glyphicons-basic-963-disappearing icons_warning_la"></i>1,08 %</h6>
									<p class="mg-y-0 tx-right">  -5,6% zur Vorperiode</p>
								</div>
							</div>
							<div class="row">
								<div class="wd-100p pos-absolute b-0 r-0" id="app">
									<chart class="ht-120"></chart>
								</div>
							</div>
						</div>
						<!-- row -->
					</div>
					<!-- card-body -->
				</div>
				<!-- card -->
			</div>
					

VUE JS Code

Vue ChartJS Reference

Generelle JS Reference	Erklärung
extends: VueChartJs.Line	Line Charts
extends: VueChartJs.Bar	Bar Charts
extends: VueChartJs.Doughnut	Doughnut Charts
extends: VueChartJs.Line, extends: VueChartJs.Bar	Mixed Bar und Line Charts
datasets: [{fill: false | true}]	"true" für Line Charts zu verwenden, die ausgefüllt sein sollen
datasets: [{borderDash: [5, 5]}]	Für Line Charts zu verwenden, deren Linie "dashes" sein sollen
datasets: [{backgroundColor: ".."}]	Value soll aus _configure.scss gezogen werden: $col-primary2_dark | $col-primary2 | $col-primary2_light | $col-primary2_light2 | $col-primary2_light3
options: {scales: {xAxes: [{stacked:true,}], {yAxes: [{stacked:true,}]}}	Für Bar Charts zu verwenden, deren Werte als "stacked Bar" angezeigt wedren sollen
options: {scales: {xAxes: [{gridLines:{drawOnChartArea: true | false}}]}}	"true" zeigt die Gridlines der x-Achse an
options: {scales: {yAxes: [{gridLines:{drawOnChartArea: true | false}}]}}	"true" zeigt die Gridlines der y-Achse an
options: {scales: {xAxes: [{gridLines:{drawBorder: true | false}}]}}	"true" zeigt die x-Achse an
options: {scales: {yAxes: [{gridLines:{drawBorder: true | false}}]}}	"true" zeigt die y-Achse an

Source Code

						<!--Vue JS script for Chart in Panel -->

						Vue.component('chart', {
							extends: VueChartJs.Line,
							data: function () {
								return {
									datacollection: {
										labels: [..],
									datasets: [{
										label: '..',
										borderWidth: 0,
										fill: false,
										backgroundColor: "..",
										borderColor: "..",
										pointBackgroundColor: 'white',
										borderDash: [5, 5],
										data: [..],
									}, {
										label: '..',
										borderWidth: 0,
										backgroundColor: "..",
										borderColor: "..",
										pointBackgroundColor: 'white',
										data: [
											..
										],
										fill: true,
									}]
								},
								options: {
									maintainAspectRatio: false,
									responsive: true,
									layout: {
										padding: {
											left: 20,
											right: 20,
											top: 20,
											bottom: 20
										}
									},
									title: {
										display: false,
										text: ''
									},
									legend:  {
										display: true,
										position: 'right',
										labels: {
											padding: 15,
											boxWidth: 20
										}
									},
									tooltips: {
										mode: 'single',
										intersect: true,
										position: 'nearest'
									},
									hover: {
										mode: 'nearest',
										intersect: true
									},
									scales: {
										xAxes: [{
											gridLines: {
												drawTicks: false,
											},
											display: true,
											ticks: {padding: 10,
												beginAtZero: true},
											scaleLabel: {
												display: false,
												labelString: ''
											}
										}],
										yAxes: [{
											gridLines: {
												drawTicks: false,
											},
											display: true,
											ticks: {padding: 10,
												beginAtZero: true},
											scaleLabel: {
												display:false,
												labelString: ''
											}
										}]
									}
								}
							},
							mounted () {
								// this.chartData is created in the mixin
								this.renderChart(this.datacollection, this.options)
							}
						})
						
						var vm = new Vue({ 
							el: '#app',
						})



						<!--Vue JS script for Chart in Card -->

						Vue.component('chart', {
							extends: VueChartJs.Line,
							data: function () {
								return {
									datacollection: {
										labels: [..],
									datasets: [{
										label: '..',
										borderWidth: 0,
										fill: false,
										backgroundColor: "..",
										borderColor: "..",
										pointBackgroundColor: 'white',
										borderDash: [5, 5],
										data: [..],
									}, {
										label: '..',
										borderWidth: 0,
										backgroundColor: "..",
										borderColor: "..",
										pointBackgroundColor: 'white',
										data: [
											..
										],
										fill: true,
									}]
								},
								options: {
									maintainAspectRatio: false,
									responsive: true,
									layout: {
										padding: {
											left: 4,
											right: 4,
											top: 0,
											bottom: 4
										}
									},
									title: {
										display: false,
										text: ''
									},
									legend: {display: false},
									tooltips: {
										mode: 'single',
										intersect: true,
										position: 'nearest'
									},
									hover: {
										mode: 'nearest',
										intersect: true
									},
									scales: {
										xAxes: [{
											gridLines: {
												drawTicks: false,
											},
											ticks: {padding: 10, 
												beginAtZero: true},
											scaleLabel: {
												display: false,
												labelString: ''
											}
										}],
										yAxes: [{
											gridLines: {
												drawTicks: false,
											},
											ticks: {padding: 10,
												beginAtZero: true},
											scaleLabel: {
												display:false,
												labelString: ''
											}
										}]
									}
								}
							},
							mounted () {
								// this.chartData is created in the mixin
								this.renderChart(this.datacollection, this.options)
							}
						})
						
						var vm = new Vue({ 
							el: '#app',
						})