Portfolio - Components

View All Components

Component: 

Features:

  1. Bar, Line, Pie, Donut and Polar Area charts
  2. Easily configured by editor

Notes:

  1. Apex Charts integration


 

Watch Short Video

Sample Chart

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec eros erat. Aliquam at nulla at metus vehicula gravida. Ut arcu elit, placerat ac eros ut, suscipit dignissim lectus. Cras sed ante lectus. Sed malesuada felis ut lectus pharetra, ut ornare urna sodales. Vivamus venenatis malesuada nulla, eu consequat nisi. 

Sample Chart 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec eros erat. Aliquam at nulla at metus vehicula gravida. Ut arcu elit, placerat ac eros ut, suscipit dignissim lectus. Cras sed ante lectus. Sed malesuada felis ut lectus pharetra, ut ornare urna sodales. Vivamus venenatis malesuada nulla, eu consequat nisi. 

paragraph--charts-repeater.html.twig

 
{% set desc = content.field_chart_description %}

{% set title = paragraph.field_chart_title.value %}

{% set type = paragraph.field_chart_type.value %}

{% set data = paragraph.field_chart_data.value %}

{% set label = paragraph.field_chart_label.value %}

{% set xy = paragraph.field_chartxy.value %}

{% set layout = paragraph.field_chart_layout.value %}

{% set legend = paragraph.field_legend_position.value %}

{% set label_values = [] %}

{% set data_values = [] %}

{% set chart_colors = [] %}


{{ attach_library('hcann_subtheme/charts_cdn') }} 


{% block paragraph %}

<div class="row mb-4 py-3 border border-1"><!--open chart-->


      {% block content %}

<div class="col-lg-6">

  <div id="chart_{{ paragraph.index }}"></div>

{% if type == "pie" %}

    <script>

        var options = {

          series: [

          {% for key, item in content.field_charts_repeater %}

            {% if key|first != "#" %}

              {% set data_values = data_values|merge([item['#paragraph'].field_chart_data[0].value|raw|trim]) %}

            {% endif %}

          {% endfor %}

            {% set data_values = data_values|join(', ') %}

            {{ data_values|trim|raw }}

          ],

          chart: {

          width: 380,

          type: 'pie',

        },

        title: {

          text: '{{ title }}',

          align: 'center'

        },

        colors: [

          {% for key, item in content.field_charts_repeater %}

            {% if key|first != "#" %}

              {% set chart_colors = chart_colors|merge(["'" ~ item['#paragraph'].field_chart_color[0].value|raw|trim ~ "'"]) %}

            {% endif %}

          {% endfor %}

            {% set chart_colors = chart_colors|join(', ') %}

            {{ chart_colors|trim|raw }}

        ],

        labels: [

          {% for key, item in content.field_charts_repeater %}

            {% if key|first != "#" %}

              {% set label_values = label_values|merge(["'" ~ item['#paragraph'].field_chart_label[0].value|raw|trim ~ "'"]) %}

            {% endif %}

          {% endfor %}

            {% set label_values = label_values|join(', ') %}

            {{ label_values|trim|raw }}

        ]

        };


        var chart_{{ paragraph.index }} = new ApexCharts(document.querySelector("#chart_{{ paragraph.index }}"), options);

        chart_{{ paragraph.index }}.render();


    </script>


{% elseif type == "line" %}


 <script>

        var options = {

          series: [{

            name: "{{ title }}",

            data: [

              {% for key, item in content.field_charts_repeater %}

            {% if key|first != "#" %}

              {% set data_values = data_values|merge([item['#paragraph'].field_chart_data[0].value|raw|trim]) %}

            {% endif %}

          {% endfor %}

            {% set data_values = data_values|join(', ') %}

            {{ data_values|trim|raw }}

            ]

        }],

          chart: {

          height: 380,

          type: 'line',

          zoom: {

            enabled: false

          }

        },

         colors: [

          {% for key, item in content.field_charts_repeater %}

            {% if key|first != "#" %}

              {% set chart_colors = chart_colors|merge(["'" ~ item['#paragraph'].field_chart_color[0].value|raw|trim ~ "'"]) %}

            {% endif %}

          {% endfor %}

            {% set chart_colors = chart_colors|join(', ') %}

            {{ chart_colors|trim|raw }}

        ],

        dataLabels: {

          enabled: false

        },

        stroke: {

          curve: 'straight'

        },

        title: {

          text: '{{ title }}',

          align: 'center',

          margin: 10,

          offsetX: 0,

          offsetY: -5

        },

        grid: {

          row: {

            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns

            opacity: 0.5

          },

        },

        xaxis: {

          categories: [

            {% for key, item in content.field_charts_repeater %}

            {% if key|first != "#" %}

              {% set label_values = label_values|merge(["'" ~ item['#paragraph'].field_chart_label[0].value|raw|trim ~ "'"]) %}

            {% endif %}

          {% endfor %}

            {% set label_values = label_values|join(', ') %}

            {{ label_values|trim|raw }}

          ],

        }

        };


        var chart_{{ paragraph.index }} = new ApexCharts(document.querySelector("#chart_{{ paragraph.index }}"), options);

        chart_{{ paragraph.index }}.render();

    </script>


{% elseif type == "bar" %}


    <script>

        var options = {

          series: [{

          data: [

            {% for key, item in content.field_charts_repeater %}

            {% if key|first != "#" %}

              {% set data_values = data_values|merge([item['#paragraph'].field_chart_data[0].value|raw|trim]) %}

            {% endif %}

          {% endfor %}

            {% set data_values = data_values|join(', ') %}

            {{ data_values|trim|raw }}

          ]

        }],

          chart: {

          type: 'bar',

          height: 380

        },

         colors: [

          {% for key, item in content.field_charts_repeater %}

            {% if key|first != "#" %}

              {% set chart_colors = chart_colors|merge(["'" ~ item['#paragraph'].field_chart_color[0].value|raw|trim ~ "'"]) %}

            {% endif %}

          {% endfor %}

            {% set chart_colors = chart_colors|join(', ') %}

            {{ chart_colors|trim|raw }}

            {# first color sets bar color #}

        ],

        title: {

          text: '{{ title }}',

          align: 'center',

          margin: 10,

          offsetX: 0,

          offsetY: -5

        },

        plotOptions: {

          bar: {

            borderRadius: 4,

            borderRadiusApplication: 'end',

            {% if xy == "y" %}

            horizontal: true,

            {% else %}

            vertical: true,

            {% endif %}

          }

        },

        dataLabels: {

          enabled: false

        },

        xaxis: {

          categories: [

             {% for key, item in content.field_charts_repeater %}

            {% if key|first != "#" %}

              {% set label_values = label_values|merge(["'" ~ item['#paragraph'].field_chart_label[0].value|raw|trim ~ "'"]) %}

            {% endif %}

          {% endfor %}

            {% set label_values = label_values|join(', ') %}

            {{ label_values|trim|raw }}

          ],

        }

        };


        var chart_{{ paragraph.index }} = new ApexCharts(document.querySelector("#chart_{{ paragraph.index }}"), options);

        chart_{{ paragraph.index }}.render();


    </script>


{% elseif type == "donut" %}


    <script>

        var options = {

          series: [

             {% for key, item in content.field_charts_repeater %}

            {% if key|first != "#" %}

              {% set data_values = data_values|merge([item['#paragraph'].field_chart_data[0].value|raw|trim]) %}

            {% endif %}

          {% endfor %}

            {% set data_values = data_values|join(', ') %}

            {{ data_values|trim|raw }}

          ],

          chart: {

          type: 'donut',

        },

        title: {

          text: '{{ title }}',

          align: 'center',

          margin: 10,

          offsetX: 0,

          offsetY: -5

        },

         colors: [

          {% for key, item in content.field_charts_repeater %}

            {% if key|first != "#" %}

              {% set chart_colors = chart_colors|merge(["'" ~ item['#paragraph'].field_chart_color[0].value|raw|trim ~ "'"]) %}

            {% endif %}

          {% endfor %}

            {% set chart_colors = chart_colors|join(', ') %}

            {{ chart_colors|trim|raw }}

        ],

          labels: [

          {% for key, item in content.field_charts_repeater %}

            {% if key|first != "#" %}

              {% set label_values = label_values|merge(["'" ~ item['#paragraph'].field_chart_label[0].value|raw|trim ~ "'"]) %}

            {% endif %}

          {% endfor %}

            {% set label_values = label_values|join(', ') %}

            {{ label_values|trim|raw }}

        ]

        };


        var chart_{{ paragraph.index }} = new ApexCharts(document.querySelector("#chart_{{ paragraph.index }}"), options);

        chart_{{ paragraph.index }}.render();

    </script>


{% else %}


    <script>

        var options = {

          series: [

             {% for key, item in content.field_charts_repeater %}

            {% if key|first != "#" %}

              {% set data_values = data_values|merge([item['#paragraph'].field_chart_data[0].value|raw|trim]) %}

            {% endif %}

          {% endfor %}

            {% set data_values = data_values|join(', ') %}

            {{ data_values|trim|raw }}

          ],

          chart: {

          type: 'polarArea',

        },

         colors: [

          {% for key, item in content.field_charts_repeater %}

            {% if key|first != "#" %}

              {% set chart_colors = chart_colors|merge(["'" ~ item['#paragraph'].field_chart_color[0].value|raw|trim ~ "'"]) %}

            {% endif %}

          {% endfor %}

            {% set chart_colors = chart_colors|join(', ') %}

            {{ chart_colors|trim|raw }}

        ],

         title: {

          text: '{{ title }}',

          align: 'center',

          margin: 10,

          offsetX: 0,

          offsetY: -5

        },

        stroke: {

          colors: ['#fff']

        },

        fill: {

          opacity: 0.8

        },

         labels: [

          {% for key, item in content.field_charts_repeater %}

            {% if key|first != "#" %}

              {% set label_values = label_values|merge(["'" ~ item['#paragraph'].field_chart_label[0].value|raw|trim ~ "'"]) %}

            {% endif %}

          {% endfor %}

            {% set label_values = label_values|join(', ') %}

            {{ label_values|trim|raw }}

        ]


        };


        var chart_{{ paragraph.index }} = new ApexCharts(document.querySelector("#chart_{{ paragraph.index }}"), options);

        chart_{{ paragraph.index }}.render();

    </script>


{% endif %}

  </div><!-- close col -->

  <div class="col-lg-6 {% if layout == 'chart_on_right' %}order-first{% endif %}">

  {{ desc }}

  </div>

      {% endblock %}

</div> <!-- close row -->

{% endblock paragraph %}