CCGA Component Library

Chart: Horizontal Bar 

<div class="chart js-chart">
    <script type="application/json" data-script>
        {
            "type": "bar",
            "options": {
                "indexAxis": "y",
                "scales": {
                    "xAxes": [{
                        "scaleLabel": {
                            "labelString": "Percentage of Vote"
                        },
                        "gridLines": {
                            "zeroLineColor": "#00005a"
                        }
                    }],
                    "yAxes": [{
                        "scaleLabel": {
                            "labelString": "Political Figure"
                        },
                        "gridLines": {
                            "zeroLineColor": "#00005a"
                        },
                        "ticks": {
                            "suggestedMin": 0,
                            "suggestedMax": 40
                        }
                    }]
                }
            },
            "data": {
                "labels": ["Raisi", "Ahmadinejad", "Ghalibaf", "Zarif", "Khatami", "Saeed Mohammad", "Hassan Khomeini", "Mohsen Rezayi", "Saeed Jalili", "Azari Jahromi", "Ali Larijani", "Other", "No one", "Don&#039;t know"],
                "datasets": [{
                    "label": "% open-ended responses",
                    "data": [27, 13, 8, 4, 4, 1, 1, 1, 0.9, 0.7, 0.5, 2, 1, 35],
                    "backgroundColor": "#00005A"
                }]
            }
        }
    </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.