chart w/ backlink

Titles at the bottom

by cristiscu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/15.1.0.37/js/common/ej.core.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/15.1.0.37/js/common/ej.data.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/15.1.0.37/js/common/ej.globalize.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/15.1.0.37/js/datavisualization/ej.chart.js" type="text/javascript"></script>

<div class="chart_cont">
    <div id="chart_div"></div>
    <a href="http://chart-templates.com" class="back-link">chart-templates.com</a>
</div>

CSS

body {
    padding: 0;
    margin: 0;
    border: none;
}
.back-link { position: absolute; left: 2px; bottom: 2px; z-index: 999; background-color: white; opacity: 0; border-radius:5px; display:block; margin:0; padding: 0 5px; text-decoration:none; opacity: 0.1; color:black; }

/*.back-link:hover { opacity: 0.5 }*/
.chart_cont:hover .back-link { opacity: 0.5; }

#chart_div, #ContentChartPh_chart_img, .chart_cont {
    width: 300px;
    height: 185px;
    padding: 0;
    margin: 0;
    border: none;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#chart_div {
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    background-image: url('http://res.cloudinary.com/chart-templates/image/upload/img/chart-loading.gif');
}
#chart_div svg { height: 185px; }
img { z-index: -1; }

JavaScript

$(function () {
    
    var options = {
        size: { width: "300", height: "185" },
        loaded: "afterLoaded", chartMouseMove: "afterLoaded",
        enable3D: false,
        isResponsive: true,
        enableRotation: false,
        title: {
            text: "Pie with Syncfusion ejChart",
            textAlignment: "center",font: { fontFamily: "Helvetica", size: "13px", color: "#000000", },
        },
        legend: {
            visible: false,
        },
        chartArea: {
        },
        primaryXAxis: {
            visible: false,
            stripLine: [{ visible: false }],
            title: {
                font: { fontFamily: "Helvetica", size: "8px", color: "#000000", },
            },
            font: { color: "transparent" },
            axisLine: { visible: false },
            majorGridLines: { visible: false },
            minorGridLines: { visible: false },
            minorTicksPerInterval: 0,
            majorTickLines: { visible: false },
            minorTickLines: { visible: false },
        },
        primaryYAxis: {
            visible: false,
            stripLine: [{ visible: false }],
            title: {
                font: { fontFamily: "Helvetica", size: "8px", color: "#000000", }, 
            },
            font: { color: "transparent" },
            axisLine: { visible: false },
            majorGridLines: { visible: false },
            minorGridLines: { visible: false },
            minorTicksPerInterval: 0,
            majorTickLines: { visible: false },
            minorTickLines: { visible: false },
        },
        commonSeriesOptions: {
            enableAnimation: false,
            tooltip: { visible: false },
            marker: {
                visible: false,
            },
        },
    };
    options.commonSeriesOptions.type = "pie";
    options.commonSeriesOptions.explode = true;
    options.commonSeriesOptions.explodeOffset = 10;
    options.series = [{ name: "month",
        points: [{ x:...