rcube-html examples
npmGitHub
Data components

Charts

Bar, line, area, pie and donut charts whose data changes from fields and buttons.

Chart

chartType picks the kind: bar, line, area, pie, donut or scatter. labels are the categories (x axis) and series the data: { key, name, data: [numbers] }. A series can be type: "line" inside a bar chart.

Options add the rest: stacked, horizontal, format (currency, ...), rulers (reference lines), dataLabels, pointRules (colors by value), hover effect, highlight, tableToggle and animation.

Fields and buttons change a chart through actions: api.setChartType, setChartValue, setChartData, addChartPoint, highlightChart, toggleSeries, or any prop with setNodeProps.

Try it

Loading example…
Events0
Use the example — every action it runs shows up here with its data.

Code

Copy Full page.js into app/your-page/page.js of a Next.js app (withrcube-html, react-bootstrap and Bootstrap's CSS installed) — it runs as is. Or copy only the schema and keep your own page.

[
  {
    "type": "row",
    "id": "row-controls",
    "children": [
      {
        "type": "column",
        "id": "c-type",
        "props": {
          "className": "col-12 col-md-4"
        },
        "children": [
          {
            "type": "SelectField",
            "id": "type",
            "props": {
              "name": "chartType",
              "label": "Chart type",
              "defaultValue": "bar",
              "onChange": "typeChanged()",
              "options": [
                {
                  "label": "Bar",
                  "value": "bar"
                },
                {
                  "label": "Line",
                  "value": "line"
                },
                {
                  "label": "Area",
                  "value": "area"
                },
                {
                  "label": "Pie",
                  "value": "pie"
                },
                {
                  "label": "Donut",
                  "value": "donut"
                }
              ]
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-slider",
        "props": {
          "className": "col-12 col-md-4"
        },
        "children": [
          {
            "type": "SliderField",
            "id": "march",
            "props": {
              "name": "march",
              "label": "March online sales",
              "min": 0,
              "max": 100,
              "defaultValue": 38,
              "valueSuffix": "K",
              "onChange": "marchChanged()"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-switches",
        "props": {
          "className": "col-12 col-md-4 d-flex gap-3 align-items-center"
        },
        "children": [
          {
            "type": "InputField",
            "id": "stacked",
            "props": {
              "type": "checkbox",
              "name": "stacked",
              "label": "Stacked",
              "onChange": "stackedChanged()"
            }
          },
          {
            "type": "InputField",
            "id": "labels",
            "props": {
              "type": "checkbox",
              "name": "labels",
              "label": "Values",
              "onChange": "labelsChanged()"
            }
          }
        ]
      }
    ]
  },
  {
    "type": "row",
    "id": "row-buttons",
    "children": [
      {
        "type": "column",
        "id": "c-buttons",
        "props": {
          "className": "d-flex flex-wrap gap-2 mb-3"
        },
        "children": [
          {
            "type": "ButtonField",
            "id": "random",
            "props": {
              "text": "Randomize",
              "onClick": "randomize()"
            }
          },
          {
            "type": "ButtonField",
            "id": "add",
            "props": {
              "text": "+ Add month",
              "onClick": "addMonth()"
            }
          },
          {
            "type": "ButtonField",
            "id": "best",
            "props": {
              "text": "Highlight best month",
              "variant": "outline-success",
              "onClick": "highlightBest()"
            }
          },
          {
            "type": "ButtonField",
            "id": "store",
            "props": {
              "text": "Show / hide Store",
              "variant": "outline-secondary",
              "onClick": "toggleStore()"
            }
          }
        ]
      }
    ]
  },
  {
    "type": "Chart",
    "id": "sales",
    "props": {
      "chartType": "bar",
      "title": "Monthly sales",
      "subtitle": "Thousands of USD",
      "height": 300,
      "labels": [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun"
      ],
      "series": [
        {
          "key": "online",
          "name": "Online",
          "data": [
            42,
            51,
            38,
            64,
            58,
            71
          ]
        },
        {
          "key": "store",
          "name": "Store",
          "data": [
            30,
            28,
            35,
            31,
            40,
            37
          ]
        },
        {
          "key": "target",
          "name": "Target",
          "type": "line",
          "dashed": true,
          "data": [
            45,
            48,
            50,
            55,
            60,
            65
          ]
        }
      ],
      "format": "number",
      "yAxis": {
        "title": "Sales (K)"
      },
      "rulers": [
        {
          "value": 60,
          "label": "Goal",
          "showValue": true
        }
      ],
      "pointRules": [
        {
          "when": {
            "lt": 32
          },
          "color": "#d03b3b"
        }
      ],
      "highlightColor": "#0ca30c",
      "tableToggle": true,
      "onPointClick": "pointClicked()",
      "onLegendClick": "legendClicked()"
    }
  }
]

Options used here

OptionWhat it does
chartTypebar, line, area, pie, donut, scatter.
labels / seriesCategories and { key, name, data, type, color, dashed } series.
stacked / horizontalStack the bars / areas; draw bars sideways.
format / currency / decimalsHow values are written (tooltip, labels, table).
yAxis / xAxis{ title, min, max, ticks, show }.
rulers / bandsReference lines { value, label } / shaded ranges { from, to }.
dataLabelsall, last, max, minmax (pie: true = percent).
pointRules / highlight / highlightColor / hover / hoverColorColors by value, highlighted marks, hover effect.
tableToggle / legend / tooltip / animateTable view button, legend position, tooltips, animation.

Events

EventWhen it runsYour action receives
onPointClick / onPointHoverA bar / point / slice is clicked or hovered.{ chart, index, label, series, seriesName, value, values }
onLegendClickA legend item is clicked.{ chart, series, hidden }