Skip to content
📊 A canvas based ability chart component
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


GitHub version Published on

A canvas based ability chart component


An easy to use and fully customizable ability chart web component based on Polymer 2.0.

img broken

img broken

img broken


  1. Install bower dependency

    bower install ability-chart --save

  2. Import ability-chart component to your project

    <link rel="import" href="YOUR_PATH/bower_components/ability-chart/ability-chart.html">


Add onto html just as normal tag elements. Pass a json object into the attribute prop to set up all the styles you want.

<ability-chart prop='{
                       "keys": ["Math", "Physics", "Physics", "Chemistry", "Chinese", "History"],
                       "values": [[85, 30, 55, 100, 10, 100]]


Param Name Description Type Example Default
prop.dimension the height and width of the chart in px Number 300 300
prop.numLayer the number of equally divided layers of the chart
must be defined if scale label needs to be shown
Number 1 1
prop.eachLayerStyle an array of object defines each layer style) Array<Object> [{"fillColor": "#bf0a0a", ""borderColor": "#207476""}] -
prop.eachLayerStyle.fillColor the color of layer area String "#d666c6" -
prop.eachLayerStyle.borderColor the border color of layer area String "#d666c6" -
prop.scale an object defines the scale labels Object "scale": {"font": "bold 12px Arial", "fontColor": "black", "offset": 12, "scaleLabel": ["0", "20", "40"]} -
prop.scale.font the font of scale label String "12px Arial" -
prop.scale.fontColor the color of scale labels String "#d666c6" -
prop.scale.offset the offset of scale labels Number 5 -
prop.scale.scaleLabel the texts of scale labels (array length has to be prop.numLayer + 1) Array ["0", "20", "40"] -
prop.labelFont the font of labels String "12px Arial" "12px Arial"
prop.labelFontColor the color of labels String "#d666c6" -
prop.labelOffset the offset of labels Numebr 5 -
prop.frameBorderWidth the border width of the chart frame Number 1 -
prop.chartBorderWidth the border width of the defined chart area Number 1 -
prop.decorLineColor the color of the center-to-vertex decoration lines String "#d666c6" -
prop.chartPortion the portion of the chart within the canvas Number 0.85 0.85
prop.chartAlpha the opacity of the defined chart area Number 0.5 -
prop.datasets an object defines the data, data labels and data styles Object "datasets": {"keys": ["Leadership", "Teamwork", "Management", "Visionary"], "values": [[79, 35, 55, 89]], "styles": [{"fillColor":"#ea9513", "borderColor": "#ea9513"}]} -
prop.datasets.keys the labels of the chart Array<String> ["Leadership", "Teamwork", "Management", "Visionary"] -
prop.datasets.values the data of the chart Array<Array<Number>> [[79, 35, 55, 89]] -
prop.datasets.styles the styles of datasets Array<Object> [{"fillColor":"#ea9513", "borderColor": "#ea9513"}] -
prop.datasets.styles.fillColor the color of a chart data area String "#ea9513" -
prop.datasets.styles.borderColor the border color of a chart data area String "#ea9513" -


Here is a fully customized example. For more examples, check out demo in the repo.

<ability-chart prop='{
                "dimension": 500,
                "numLayer": 5,
                  "borderColor": "#bbbbbb"
                  "borderColor": "#bbbbbb"
                  "borderColor": "#bbbbbb"
                  "borderColor": "#bbbbbb"
                  "borderColor": "#bbbbbb"
                "labelFont": "13px Arial",
                "labelOffset": 10,
                "frameBorderWidth": 1,
                "chartBorderWidth": 2,
                "decorLineColor": "#bbbbbb",
                "chartPortion": 0.75,
                "chartAlpha": 0.95,
                "scale": {
                  "font": "bold 12px Arial",
                  "fontColor": "black",
                  "offset": 12,
                  "scaleLabel": ["0", "20", "40", "60", "80", "100"]
                    "keys": [
                              "Strength", "Stamina", "Perception",
                              "Creativity", "Charisma", "Confidence",
                              "Spirituality", "Discipline", "Luck", "Humor",
                              "Social Skill"
                    "values": [[85, 39, 55, 77, 95, 84, 50, 90, 69, 80, 30],
                               [30, 70, 5, 100, 86, 30, 60, 100, 77, 33, 18]],
                    "styles": [{"borderColor": "#334b5c"}, {"borderColor": "#d53c37"}]



You can’t perform that action at this time.