CCGA Component Library

Chart: Bar 

<div class="chart js-chart">
    <script type="application/json" data-script>
        {
            "type": "bar",
            "options": {
                "scales": {
                    "xAxes": [{
                        "scaleLabel": {
                            "labelString": "Percentage of people polled"
                        },
                        "gridLines": {
                            "zeroLineColor": "#00005a"
                        }
                    }],
                    "yAxes": [{
                        "scaleLabel": {
                            "labelString": "Opinions"
                        },
                        "gridLines": {
                            "zeroLineColor": "#00005a"
                        }
                    }]
                }
            },
            "data": {
                "labels": ["Preventing Iran from developing nuclear weapons capability", "Preventing North Korea from developing nu&#039;clear weapons capability", "Limiting the buildup of nuclear weapons in both countries"],
                "datasets": [{
                    "label": "Americans",
                    "data": [71, 71, 69],
                    "backgroundColor": "#00005A"
                }, {
                    "label": "Russians",
                    "data": [61, 60, 70],
                    "backgroundColor": "#00c6f5"
                }]
            }
        }
    </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_bar">
                        <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.