Chartist JS
Updated on
Last site update: 8 May 2024
Finger strength of max-hang on a 20mm edge for 5 seconds
Max-weight 5s hang on a 20mm edge
Here is the code for the first graph. Note the last line where you have to include each block (data and options in this case).
1var data = {
2 // A labels array that can contain any sort of value
3 labels: ['Ben Moon', 'Magnus Mitbo', 'Steve McClure', 'Jim Pope', 'Max Milne', 'Will Bosi', 'Alex Megos'],
4 // Our series array that contains series objects or in this case series data arrays
5 series: [
6 [101, 106, 115, 116, 118, 130, 132]
7 ]
8};
9
10var options = {
11 low: 100,
12 high: 140,
13 horizontalBars: true,
14 reverseData: true,
15 axisY: {
16 offset: 70
17 }
18}
19
20// Create a new bar chart object where as first parameter we pass in a selector
21// that is resolving to our chart container element. The Second parameter
22// is the actual data object.
23new Chartist.Bar('.ct-chart', data, options);