<pre style="display: none;" class="facets-data">{$facets|var_dump}</pre> <pre style="display: none;" class="charts-data">{$chart|var_dump}</pre>

{if not empty($facets)}

{if empty($container)}
{$containerClass = 'row'}
{else}
{$containerClass = $container.class}
{/if}
{$i = 0}

<div class="{$containerClass}">

{foreach $facets as $facet}
{if count($facet.options) gt 0}
{if not isset($chart$i.class)}{$chart$i.class = 'col-xs-12'}{/if}

<div class="{$chart$i.class|escape}">

<label class="h3">
{if not empty($chart$i.title)}
{$chart$i.title|escape}
{else}
{$facet.label|replace:' (Tree)':''|tr_if|escape}
{/if}
</label>
{$values = []}
{$labels = []}
{foreach from=$facet.options key=value item=label}
{if strpos($label, 'trackeritem:0 ') !== false}
{continue}
{/if}
{if preg_match('/(.*?)\s+\((\d+)\)/', $label|escape, $matches)}
{$labels[] = $matches1}
{$values[] = $matches2}
{/if}
{/foreach}

{if not isset($chart$i.type)}{$chart$i.type = 'bar'}{/if}
{if not isset($chart$i.id)}{$chart$i.id = 'chart_'|cat:$i}{/if}
{if not isset($chart$i.size)}
{$chart$i.size = ,}
{else}
{$chart$i.size = ':'|explode:$chart$i.size}
{/if}

{if not isset($chart$i.colors)}
{$col = []}
{else}
{$col = ':'|explode:$chart$i.colors}
{/if}

{if not empty($chart$i.hcolors)}
{$hcol = ':'|explode:$chart$i.hcolors}
{else}
{$hcol = $col}
{/if}

{$datasets = 'data' => $values,
'backgroundColor' => $col}
{if $hcol}{$datasets.hoverBackgroundColor = $hcol}{/if}
{if $chart$i.title}{$datasets.label = $chart$i.title|escape}{/if}

{$data = ['data' => ['labels' => $labels,'datasets' => $datasets]]}

{$options = 'responsive' => true, 'maintainAspectRatio' => false}{* some handy defaults (not working as expected) *}
{$data.options = $options}

{* <pre style="display: none;" class="data-options">{$data|var_dump}</pre>*}

{wikiplugin _name='chartjs' type=$chart$i.type id=$chart$i.id width=$chart$i.size0 height=$chart$i.size1 debug=1}
{$data|json_encode}
{/wikiplugin}

</div>

{/if}
{$i = $i + 1}
{/foreach}

</div>

{/if}