Open UTCWebDev opened 7 years ago
The following is acceptable for this use case. However, if the Accessibility plugin is absent, it is difficult to have both the verbal/text label and the value appear on the pie chart. Is there some way to use labelInterpolationFnc to display both the label and the value on the pie chart label?
Hey there. Can you share the code of your example?
var data = {
series: [2579,811,397],
labels: ['Courses','Events','Experiences'],
};
var options = {
plugins: [
// Accessibility plugin, styling and statements
Chartist.plugins.ctAccessibility({
// table caption or header
caption: 'Experiential Learning 2015-16',
// series header - if not x/y X numeric data value
seriesHeader: '',
// table summary parameter for screen reader only
summary: 'Experiential Learning 2015-16 *(Data may include duplicates as students could participate in more than one type of experiential learning.)',
// accessible info table is visually hidden by default - here, we over-ride with visible styles - these were moved to CSS id wildcard
visuallyHiddenStyles: '',
})
]
};
var responsiveOptions = [
['screen and (min-width: 640px)', {
chartPadding: 30,
labelOffset: 80,
labelDirection: 'explode'
}],
['screen and (min-width: 1024px)', {
chartPadding: 20,
labelOffset: 80
}]
];
new Chartist.Pie('#chart-ExpLearning', data, options, responsiveOptions);
.ct-chart {
position: relative;
margin-top: 40px;
margin-bottom: 300px;
}
svg.ct-chart-line {
padding-top: 8px;
}
.ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point,
.ct-series-a .ct-slice-donut {
stroke: #00386b;
}
.ct-series-b .ct-bar, .ct-series-b .ct-line, .ct-series-b .ct-point,
.ct-series-a .ct-slice-donut {
stroke: #e0aa0f;
}
.ct-series-c .ct-bar, .ct-series-c .ct-line, .ct-series-c .ct-point,
.ct-series-a .ct-slice-donut {
stroke: #adafaa;
}
.ct-series-a .ct-area, .ct-series-a .ct-slice-pie {
fill: #00386b;
}
.ct-series-b .ct-area, .ct-series-b .ct-slice-pie {
fill: #e0aa0f;
}
.ct-series-c .ct-area, .ct-series-c .ct-slice-pie {
fill: #adafaa;
}
.ct-axis-title {
font-size: 20px;
}
/* Accessible content is visuallly hidden by default, here it is styled to be visible */
*[id^='ct-accessibility-table-'] {
position: absolute;
top: 100%; left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
max-width: 90%;
font-size: 12px;
overflow-x: auto;
background-color: #eee;
}
table {
border-spacing: 0;
min-width: 100%;
text-align: center;
border-collapse: collapse;
}
table td, table th, table caption {
padding: 1em 1.5em
}
table tr td, table tr th {
border-bottom: 1px solid rgba(0, 0, 0, .1)
}
table thead th {
padding: .8em 1em
}
/* Legend styles */
.ct-legend {
position: relative;
z-index: 10;
list-style: none;
text-align: center;
}
ul.ct-legend {
top: -20px;
margin: auto;
}
.ct-legend li {
position: relative;
padding-left: 23px;
margin-right: 10px;
margin-bottom: 3px;
cursor: pointer;
display: inline-block;
}
.ct-legend li:before {
width: 12px;
height: 12px;
position: absolute;
left: 0;
content: '';
border: 3px solid transparent;
border-radius: 2px;
}
.ct-legend li.inactive:before {
background: transparent;
}
.ct-legend.ct-legend-inside {
position: absolute;
top: 0;
right: 0;
}
.ct-legend.ct-legend-inside li{
display: block;
margin: 0;
line-height: 1.4em;
}
.ct-legend .ct-series-0:before {
background-color: #00386b;
border-color: #00386b;
}
.ct-legend .ct-series-1:before {
background-color: #e0aa0f;
border-color: #e0aa0f;
}
.ct-legend .ct-series-2:before {
background-color: #adafaa;
border-color: #adafaa;
}
.ct-legend .ct-series-3:before {
background-color: #d17905;
border-color: #d17905;
}
<html>
<head>
<link rel="stylesheet prefetch" href="bower_components/normalize-css/normalize.css" />
<link rel="stylesheet prefetch" href="bower_components/chartist/dist/chartist.min.css" />
<link rel="stylesheet prefetch" href="assets/css/utc-charts.css" /></head>
<body>
<h1 style="text-align:center;">Experiential Learning 2015-16</h1>
<div id="chart-expLearning" class="ct-chart ct-major-tenth"></div>
<script src="bower_components/chartist/dist/chartist.min.js"></script>
<script src="bower_components/chartist-plugin-axistitle/dist/chartist-plugin-axistitle.min.js"></script>
<script src="bower_components/chartist-plugin-accessibility/dist/chartist-plugin-accessibility.min.js"></script>
<script src="bower_components/chartist-plugin-barlabels/dist/chartist-plugin-barlabels.min.js"></script>
<script src="bower_components/chartist-plugin-pointlabels/dist/chartist-plugin-pointlabels.min.js"></script>
<script src="git_components/chartist-plugin-legend/chartist-plugin-legend.js"></script>
<script src="assets/js/chart-exp-learning.js"></script>
</body>
</html>
I would like to display the accessibility table with a pie chart, in which the labels are numeric on the pie chart. I cannot include the verbal/text labels in the chart data, or the numbers are replaced on the pie with the text labels; also the accessibility table loses its labels and only display numbers. Is there a way to have both?
http://codepen.io/utcwebdev/pen/bqazEy