Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/w3c-translations-chart.js.html

Created November 2, 2022 18:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfreear/b77afac3e7c9787a64297a3d50d288a1 to your computer and use it in GitHub Desktop.
Save nfreear/b77afac3e7c9787a64297a3d50d288a1 to your computer and use it in GitHub Desktop.
Download ZIP
Chart: W3C Specs - Number of translations | https://codepen.io/nfreear/pen/oNyxBjv
Raw
w3c-translations-chart.js.html
<!doctype html> <title> Chart </title>
<style>
#container {
height: 400px;
width: 100%;
}
.highcharts-point {
fill: teal;
stroke: gray;
stroke-width: 1px;
width: 28px;
}
</style>
<h1> Chart </h1>
<div id="container"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
const chart = Highcharts.chart( /* 'container', */ {
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Number of translations'
},
subtitle: {
text: 'Source: https://www.w3.org/Translations'
},
xAxis: {
categories: [ 'WCAG 2.0', 'WCAG 2.1', 'HTML 4', 'ARIA 1.0', 'ARIA 1.1' ],
title: {
text: 'W3C Specifications'
}
},
yAxis: {
title: {
text: 'Number of translations'
}
},
series: [{
name: 'W3C Specifications', // 'Jane',
data: [ 18, 11, 7, 2, 1 ]
} /* , {
name: 'John',
data: [5, 7, 3]
} */ ],
colors: [ 'gray' ] // [ 'teal' ]
});
</script>
<pre>
NDF, 31-Oct-2022
* https://www.highcharts.com/demo/bar-basic,
* https://stackoverflow.com/questions/20442147/how-to-convert-html-table-to-chart
</pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment