Level Chart 
Description
The Level Chart Component is used for Displaying the different level's of Language Proficiencies, It functions like tabs as you can navigation through the different levels by clicking on the bars in the chart, which displays a short description about the level when active.
There is an additional option to set a locked level, this will disable clicking through the other levels and lock onto a single level.
Installation
yarn add @berlitz/level-chart
Props
| Argument | Type | Required | Default |
|---|---|---|---|
| data | array of objects | true | na |
| lockedLevel | number | false | null |
| chartHelperLabel | string | false | Please select a level for more info |
Example
[
{ "content": "example paragraph 1", "groupName": "newbie", "level": 1 },
{ "content": "example paragraph 2", "groupName": "alright", "level": 2 },
{ "content": "example paragraph 3", "groupName": "ayyyyy", "level": 3 },
{ "content": "example paragraph 4", "groupName": "awh yeah", "level": 4 }
]
Usage
import React from 'react'
import { H2 } from '@berlitz/globals/lib/components/typography'
import Spacer from '@berlitz/spacer'
import LevelChart from './src/LevelChartContainer'
const MyApp = () => (
<>
<H2>Proficiency Levels for All Languages</H2>
<Spacer size="sm" />
<LevelChart data={data} />
</>
)