<span>
    <svg width="150" height="150" viewBox="0, 0, 150, 150" class="hoverable clickable">
        <g class="title">
            <text ng-attr-x="{{svgWidth / 2}}" 
                      ng-attr-y="{{headerHeight}}"
                      text-anchor="middle"
                      stroke="black"
                      font-size="10px">
                {{chartTitle}}
            </text>
        </g>
        <g class="gridlines">
            <line ng-repeat="gridline in gridLines" 
                      ng-attr-x1="{{gridline.x1}}" 
                      ng-attr-y1="{{gridline.y1}}"
                      ng-attr-x2="{{gridline.x2}}" 
                      ng-attr-y2="{{gridline.y2}}"
                      stroke="black"
                      stroke-width="1">
            </line>
        </g>
        <g class="blocks">
            <rect ng-repeat="timetableBlock in timetableBlocks" 
                      ng-attr-x="{{timetableBlock.x}}" 
                      ng-attr-y="{{timetableBlock.y}}"
                      ng-attr-width="{{timetableBlock.width}}"
                      ng-attr-height="{{timetableBlock.height}}"
                      ng-attr-fill="{{timetableBlock.color}}">
            </rect>
        </g>
    </svg>
</span>