CCGA Component Library

Chart: Doughnut 

<div class="chart js-chart">
    <script type="application/json" data-script>
        {
            "type": "doughnut",
            "options": {},
            "data": {
                "labels": ["Dataset One", "Dataset Two", "Dataset Three", "Dataset Four", "Dataset Five", "Dataset Six", "Dataset Seven", "Dataset Eight"],
                "datasets": [{
                    "data": [25, 40, 15, 25, 30, 35, 20, 7],
                    "backgroundColor": ["#00005A", "#175BF1", "#00C6F5", "#00D4A8", "#0C5E38", "#FFAD17", "#FF6F61", "#FF3B36"]
                }]
            }
        }
    </script>

    <div class="fs-row">
        <div class="fs-cell fs-lg-8">
            <div class="chart_inner">
                <header class="chart_head">
                    <h2 class="chart_title">
                        Cras Sit Amet
                    </h2>

                    <div class="chart_description">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat leo, porta quis arcu in, sollicitudin porttitor sem. Cras et neque lobortis, interdum nisi vitae, mattis felis. In odio lorem, tempor vel pellentesque at In odio lorem, tempor vel pellentesque at.</p>
                    </div>
                </header>

                <div class="chart_content">
                    <div class="chart_container chart_doughnut">
                        <canvas data-canvas></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="chart js-chart">
	<script type="application/json" data-script>
		{{ chart_json|json_encode }}
	</script>

	<div class="fs-row">
		<div class="fs-cell {{ cell }}">
			<div class="chart_inner">
				<header class="chart_head">
					<h2 class="chart_title">
						{{ title }}
					</h2>

					{% if description %}
						<div class="chart_description">
							<p>{{ description }}</p>
						</div>
					{% endif %}
				</header>

				<div class="chart_content">
					<div class="chart_container chart_{{ chart_json.type }}">
						<canvas data-canvas></canvas>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.