claviz-charts v0.5.0

Claviz Charts

Container chart DEMO

const parentElement = document.getElementById('chart');
const options = {
    data: [
        {
            "data": [
                {
                    "color": "#7bc043",
                    "label": "Apples",
                    "value": 2,
                    "tooltip": "Custom tooltip"
                }
            ],
            "label": "line 1"
        },
        {
            "data": [],
            "label": "line 2"
        },
        {
            "data": [
                {
                    "color": "#f37736",
                    "label": "Oranges",
                    "value": 10
                }
            ],
            "label": "line 3"
        },
    ]
};
generateContainerChart(parentElement, options);

Options

• data object[] required\ Array of data to display.

  • label string\ Label of the line base.
  • color string\ Color of the line base (default is #d3d3d3).
  • style string\ Custom CSS styles of the label.
  • data object[]\ Array of line data.
    • color string
    • label string
    • value number
    • tooltip string
    • style string

• padding number\ Padding in px between chart elements. 15 by default.

• orientation horizontal | vertical\ horizontal by default.

• reversed boolean\ false by default. Determines location of the line base:

• select function(data)\ Function that will be executed when user clicks on chart element.

• verticalTextTopDown boolean\ false by default. Change text orientation to top-down when it is positioned vertically.