Premium components
Custom Chart
Premium feature

This is a premium feature which requires a paid plan to be used. See here for more details.

Custom Chart

The Chart.Custom component provides the flexibility to make practically any kind of chart and layout, and is powered by the Apache eCharts library.

Example JSON

Below is an example of the JSON required to define a Chart.Custom component:

{
    "type": "Chart.Custom",
    "options": {
        "width": "6/12",
        "config": {
            "xAxis": {
                "type": "category",
                "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
            },
            "yAxis": {
                "type": "value"
            },
            "series": [
                {
                    "data": [120, 200, 150, 80, 70, 110, 130],
                    "type": "bar"
                }
            ]
        }
    }
}

Options

KeyDescription
configConfiguration for the chart which must be the Apache eCharts option object

For examples of charts possible with Apache eCharts, please see the examples section.

Width

For details on the width key, please see here.

Example

The JSON required to produce the above example is available below:

{
    "type": "Chart.Custom",
    "options": {
        "aspect_ratio": 1.6,
        "config": {
            "title": {
                "text": "Bump Chart (Ranking)"
            },
            "tooltip": {
                "trigger": "item"
            },
            "grid": {
                "left": 30,
                "right": 110,
                "bottom": 30,
                "containLabel": true
            },
            "xAxis": {
                "type": "category",
                "splitLine": {
                    "show": true
                },
                "axisLabel": {
                    "margin": 30,
                    "fontSize": 16
                },
                "boundaryGap": false,
                "data": ["2001", "2002", "2003", "2004", "2005", "2006"]
            },
            "yAxis": {
                "type": "value",
                "axisLabel": {
                    "margin": 30,
                    "fontSize": 16,
                    "formatter": "#{value}"
                },
                "inverse": true,
                "interval": 1,
                "min": 1,
                "max": 9
            },
            "series": [
                {
                    "name": "Orange",
                    "symbolSize": 20,
                    "type": "line",
                    "smooth": true,
                    "emphasis": {
                        "focus": "series"
                    },
                    "endLabel": {
                        "show": true,
                        "formatter": "{a}",
                        "distance": 20
                    },
                    "lineStyle": {
                        "width": 4
                    },
                    "data": [6, 1, 7, 8, 8, 2]
                },
                {
                    "name": "Tomato",
                    "symbolSize": 20,
                    "type": "line",
                    "smooth": true,
                    "emphasis": {
                        "focus": "series"
                    },
                    "endLabel": {
                        "show": true,
                        "formatter": "{a}",
                        "distance": 20
                    },
                    "lineStyle": {
                        "width": 4
                    },
                    "data": [3, 4, 4, 2, 4, 8]
                },
                {
                    "name": "Apple",
                    "symbolSize": 20,
                    "type": "line",
                    "smooth": true,
                    "emphasis": {
                        "focus": "series"
                    },
                    "endLabel": {
                        "show": true,
                        "formatter": "{a}",
                        "distance": 20
                    },
                    "lineStyle": {
                        "width": 4
                    },
                    "data": [9, 9, 6, 4, 9, 4]
                },
                {
                    "name": "Sakana",
                    "symbolSize": 20,
                    "type": "line",
                    "smooth": true,
                    "emphasis": {
                        "focus": "series"
                    },
                    "endLabel": {
                        "show": true,
                        "formatter": "{a}",
                        "distance": 20
                    },
                    "lineStyle": {
                        "width": 4
                    },
                    "data": [7, 3, 8, 3, 7, 5]
                },
                {
                    "name": "Banana",
                    "symbolSize": 20,
                    "type": "line",
                    "smooth": true,
                    "emphasis": {
                        "focus": "series"
                    },
                    "endLabel": {
                        "show": true,
                        "formatter": "{a}",
                        "distance": 20
                    },
                    "lineStyle": {
                        "width": 4
                    },
                    "data": [1, 6, 2, 1, 1, 9]
                },
                {
                    "name": "Iwashi",
                    "symbolSize": 20,
                    "type": "line",
                    "smooth": true,
                    "emphasis": {
                        "focus": "series"
                    },
                    "endLabel": {
                        "show": true,
                        "formatter": "{a}",
                        "distance": 20
                    },
                    "lineStyle": {
                        "width": 4
                    },
                    "data": [2, 2, 3, 5, 6, 6]
                },
                {
                    "name": "Snappy Fish",
                    "symbolSize": 20,
                    "type": "line",
                    "smooth": true,
                    "emphasis": {
                        "focus": "series"
                    },
                    "endLabel": {
                        "show": true,
                        "formatter": "{a}",
                        "distance": 20
                    },
                    "lineStyle": {
                        "width": 4
                    },
                    "data": [8, 5, 1, 7, 2, 1]
                },
                {
                    "name": "Lemon",
                    "symbolSize": 20,
                    "type": "line",
                    "smooth": true,
                    "emphasis": {
                        "focus": "series"
                    },
                    "endLabel": {
                        "show": true,
                        "formatter": "{a}",
                        "distance": 20
                    },
                    "lineStyle": {
                        "width": 4
                    },
                    "data": [5, 7, 9, 9, 5, 7]
                },
                {
                    "name": "Pasta",
                    "symbolSize": 20,
                    "type": "line",
                    "smooth": true,
                    "emphasis": {
                        "focus": "series"
                    },
                    "endLabel": {
                        "show": true,
                        "formatter": "{a}",
                        "distance": 20
                    },
                    "lineStyle": {
                        "width": 4
                    },
                    "data": [4, 8, 5, 6, 3, 3]
                }
            ]
        }
    }
}

Missing something?

Hybiscus is continuously improving and adding new features. If you think we are missing a critical feature, please do not hesitate to contact us and offer your feedback at support@hybiscus.dev