Edit file File name : widget-yearchart.html.twig Content :{% set backgroundColor = config('theme.chart.background_color') %} {% set borderColor = config('theme.chart.border_color') %} {% set gridColor = config('theme.chart.grid_color') %} {% set colors = options.color|default('')|split(';') %} {% set type = options.type|default('line') %} {% if type not in ['line', 'bar'] %} {% set type = 'line' %} {% endif %} {% if not title is empty %} <p class="text-center"> <strong> {{ title|trans }} </strong> </p> {% endif %} <div class="chart"> <canvas id="timeChart" style="height: {{ config('theme.chart.height') }}px;"></canvas> </div> <script type="text/javascript"> document.addEventListener('kimai.initialized', function() { new Chart( document.getElementById('timeChart').getContext('2d'), { type: '{{ type }}', data: { labels: moment.months(), datasets: [ {% for yearName, year in data %} {% set yearBackgroundColor = backgroundColor %} {% set yearBorderColor = borderColor %} {% if colors[loop.index-1] is defined %} {% set yearColors = colors[loop.index-1]|split('|') %} {% if yearColors.0 is defined and not yearColors.0 is empty %} {% set yearBackgroundColor = yearColors.0 %} {% set yearBorderColor = yearColors.0 %} {% if yearColors.1 is defined and not yearColors.1 is empty %} {% set yearBorderColor = yearColors.1 %} {% endif %} {% endif %} {% endif %} { label : '{{ yearName }}', backgroundColor : '{{ yearBackgroundColor }}', borderColor : '{{ yearBorderColor }}', pointRadius : 2, borderWidth : 1, pointHitRadius : 10, lineTension : 0.3, data : [ {% for month in year.months %} {{ month.totalDuration|chart_duration }} {% if not loop.last %},{% endif %} {% endfor %} ], realData : [ {% for month in year.months %} '{{ month.totalDuration|duration }}' {% if not loop.last %},{% endif %} {% endfor %} ] } {% if not loop.last %},{% endif %} {% endfor %} ] }, options: { maintainAspectRatio: true, responsive: true, scales: { xAxes: [{ gridLines: { display: false } }], yAxes: [{ gridLines: { display: true, color: '{{ gridColor }}', lineWidth: 1 } }] }, tooltips: { callbacks: { label: function(tooltipItem, data) { return data.datasets[tooltipItem.datasetIndex].realData[tooltipItem.index]; } } } } } ); }); </script> Save