tabler/pages/_includes/js/charts.html

{% removeemptylines %}
{% assign data = site.data.charts[include.chart-id] %}

{% if data %}
<script>
document.addEventListener("DOMContentLoaded", function(event) {
   window.chart = window.chart || {};
   
   var el;
   window.ApexCharts && (window.chart["{{ include.chart-id }}"] = new ApexCharts((el = document.getElementById('{{ include.id }}')), {
      chart: {
         type: '{{ data.type }}',
         height: el.offsetHeight,
         {% if data.sparkline %}
         sparkline: {
            enabled: true
         },
         {% endif %}
         {% if data.stacked %}
         stacked: true,
         {% endif %}
      },

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

      {% if data.dashed-history or data.stroke-curve %}
      stroke: {
         {% if data.dashed-history %}
         width: [2, 1],
            dashArray: [0, 3],
         {% endif %}
         {% if data.stroke-curve %}
         curve: '{{ data.stroke-curve }}',
         {% endif %}
      },
      {% endif %}

      {% if data.series %}
      {% if data.type == 'pie' or data.type == 'donut' %}
      series: [{% for serie in data.series %}{{ serie.data[0] }}{% 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.type == 'pie' or data.type == 'donut' %}
      pie: {
         height: el.offsetHeight
      },
      {% 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.auto-min %}
      yaxis: {
         min: function(min) { return min },
      },
      {% endif %}

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

      {% if data.rotated %}
      plotOptions: {
         bar: {
            horizontal: true,
         }
      },
      {% endif %}

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

      {% if data.hide-legend %}
      legend: {
         show: false, //hide legend
      },
      {% endif %}

      {% 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();
});
</script>
{% endif %}
{% endremoveemptylines %}