Labels and values in pie chart with accessibility and legend plugins

[UTCWebDev]

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

[UTCWebDev]

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?

[gionkunz]

Hey there. Can you share the code of your example?

[UTCWebDev]

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);

[UTCWebDev]

.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;
}

[UTCWebDev]

<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>