Skip to main content

Chart Settings

Panel components for Drawing Charts (Last updated on March 5th, 2023)​

Components​

Common Props (Base)​

PropertyTypeDescription
fieldRequiredAccess the component values on the chart by defining the field.
defaultOptionalSet the default component values.
labelOptionalDisplay and customize the component labels.
widthOptionalSet the component size based on your preferences. (Suggested Value: 0% to 100% as strings)

NOTE: Note on field property:

Every component should have the “field” property it needs, and by defining it, you can access the settings to customize the values in your chart.

Advanced Components​

Our templates have two types of components. They are either advanced, which you can customize according to your preference, like theme, font, etc., or pre-generated from many base components, including header, footer, etc. Some of the components are template-specific, which means you can find them only in certain templates and not on others.

Base Components​

input-text​

{
    "type": "input-text",
    "default": "default value"
}

input-textarea​

{
    "type": "input-textarea",
    "default": "default value"
}

input-number​

{
    "type": "input-number",
    "default": 0,
    "step": 0.1 // optional
}

input-slider​

{
    "type": "input-slider",
    "default": 0,
    "min": 0,
    "max": 100,
    "step": 1 // optional
}

input-file​

{
    "type": "input-file",
    "maxSize": 102400, //optional - max file size in bytes
    "accept":"image/*"
}

NOTE: ( accept property )

See full docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept

warning: Please, do not use this component. It is not completed yet.

color-picker​

{
    "type": "color-picker",
    "default": "#fff", // hex
}

switch​

{
    "type": "switch",
    "default": false, // bool
}

select​

{
    "type": "select",
    "options":[
        {
            "display":"label of item",
            "value":"unique-value-of-it",
            "icon":"" // optional 
        }
    ]
}

Icon variations:

    "align-left",
    "align-right",
    "align-vertically",
    "arrow-up",
    "arrow-down",
    "textalign-left",
    "textalign-right",
    "textalign-center"

select-color-palette​

{
    "type": "select-color-palette",
    "options":[
        {
            "display":"Blue",
            "value":"#D7E9FC,#0C5097",
            "key":"Blue" // optional , if you not define key , value will be used as key
        }
    ],
    "default":"Blue"
}

radio-button​

{
    "type": "radio-button",
    "options":[
        {
            "display": "Left",
            "value": "left"
        },
        {
            "display": "Right",
            "value": "right"
        }
    ],
    "default":"left"
}

Advanced Components​

palette​

You can see a complete document on the palette component here: palette docs

font​

This component displays a list of Google fonts, which you can choose from according to your preferences. The changes you apply would be automatically done on the chart.

Font Variations: You can see a complete list of fonts here: https://unpkg.com/@plotset/data/data/fonts.json

{
    "type": "font",
    "field":"legends",
    "default":"Inter" // optional , default is Roboto
}

notice: in the config variable , you can access font family like this: config.fonts.legends

Almost every chart in PlotSet has the header and footer components. They are made of base components and will be displayed on the header and footer of the plotting area. The components included are the title, subtitle, source, border, etc., and each one has its own styling options, allowing you to customize them as you want.