tabler/pages/_includes/ui/chart.html

{% assign data = site.data.charts[include.chart-id] %}
{% assign id = include.id | default: include.chart-id %}
{% assign height = include.height | default: 10 %}
{% assign class = include.class %}

{% if include['size'] == 'sm' %}
{% assign class = class | append: ' chart-sm' | strip %}
{% assign height = 2.5 %}
{% endif %}

{% if data %}
{% if data.extend %}
{% assign data = site.data.charts[data.extend] | concat_objects: site.data.charts[include.chart-id] %}
{% endif %}

<div id="chart-{{ id }}" {% if class %} class="{{ class }}" {% endif %}{% if data.debug and jekyll.environment == 'development' %} style="outline: 1px solid red" {% endif %}></div>

{% append_lib apexcharts %}
{% capture script %}
<script>
	// @formatter:off
	document.addEventListener("DOMContentLoaded", function () {
		{% if jekyll.environment == 'development' %}
		window.tabler_chart = window.tabler_chart || {};
		{% endif %}

		window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
			chart: {
				type: "{{ data.type | default: 'bar' }}",
				{% if data.title or data.type == "bar" or data.type == "line" %}
				fontFamily: 'inherit',
				{% endif %}
				height: {{ height | times: 16 }},

				{% if data.sparkline %}
				sparkline: {
					enabled: true
				},
				{% else %}
				parentHeightOffset: 0,
				toolbar: {
					show: false,
				},
				{% endif %}

				{% unless data.animations %}
				animations: {
					enabled: false
				},
				{% endunless %}

				{% if data.stacked %}
				stacked: true,
				{% endif %}
			},

			{% if data.type == 'bar' and data.horizontal %}
			plotOptions: {
				bar: {
			 		horizontal: true,
				}
			},
			{% endif %}

			{% if data.datalabels %}
			dataLabels: {
				enabled: true,
			},
			{% endif %}

			fill: {
				opacity: {% if data.type == 'area' %}.16{% else %}1{% endif %},
				{% if data.type == 'area' %}type: 'solid'{% endif %}
			},

			{% if data.title %}
			title: {
				text: "{{ data.title | escape }}",
				margin: 0,
				floating: true,
				offsetX: 10,
				style: {
					fontSize: '18px',
				},
			},
			{% endif %}

			{% if data.type == 'area' or data.type == 'line' %}
			stroke: {
				width: {% if data.stroke-width %}[{{ data.stroke-width | join: ', '}}]{% else %}2{% endif %},
				{% if data.stroke-dash %}dashArray: [{{ data.stroke-dash | join: ', '}}],{% endif %}
				lineCap: "round",
				curve: "{{ data.stroke-curve | default: 'smooth' }}",
			},
			{% endif %}

			{% if data.series %}
			{% if data.type == 'pie' or data.type == 'donut' or data.type == 'radialBar' %}
			series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
			labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],

			{% else %}series: [{% for serie in data.series %}{
				name: "{{ serie.name }}",
				data: [{{ serie.data | join: ', ' }}]
			}{% unless forloop.last %},{% endunless %}{% endfor %}],
			{% endif %}
			{% endif %}

			{% if data.show - grid %}
			grid: {
				show: true,
			},
			{% endif %}

			{% if data.show-data-labels %}
			dataLabels: {
				enabled: true,
			},
			{% endif %}

			{% if data.categories or data.days-labels-count %}
			xaxis: {
				{% if data.categories %}
				categories: [{% for category in data.categories %}"{{ category }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
			{% endif %}

			{% if data.days-labels-count %}
				type: 'datetime', {% endif %}
			},
			{% endif %}

			{% if data.days-labels-count %}
			labels: [...Array({{ data.days-labels-count }}).keys()].map(n => '2019-09-' + (n + 1)),
			{% endif %}

			{% if data.series %}
			colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'blue' %}"{{ color | tabler_color }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
			{% endif %}

			{% unless data.show-legend %}
			legend: {
				show: false,
			},
			{% endunless %}

			{% if data.hide-tooltip %}
			tooltip: {
				enabled: false
			},
			{% endif %}

			{% if data.hide-points %}
			point: {
				show: false
			},
			{% endif %}

			{% if data.show-markers %}
			markers: {
				size: 2
			},
			{% endif %}
		})).render();
	});
	// @formatter:on
</script>
{% endcapture %}

{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_global scripts %}
{{ script }}
{% endcapture_global %}
{% endif %}

{% endif %}