Skip to main content

Genesis G2Plot chart

Genesis charts are based on G2plot, a powerful charting library that provides various customizable chart types, enabling you to create interactive and visually appealing data visualizations.

The G2PlotChart component has several key properties that allow you to configure and display the chart with your desired data and settings. These properties give you full control over how the chart behaves and looks:

  • config - The configuration to use for the chart. Check ChartConfig for possible options. This allows for detailed customization of the chart's appearance, behavior, and functionality.

  • data - The data to display in the chart. This is the dataset that will be visualized, and it can be dynamically updated based on user interaction or data source changes.

  • type - The type to use for the chart. If not set, the default bar chart type will be used. You can specify different chart types such as line, area, pie, and others to best match your data and analytical needs.

These properties, combined with the wide range of chart types available, offer a flexible way to present data visually and interactively, making complex information more accessible and easier to analyze.

Examples​

Adding a G2Plot chart component to the template​

Below we have a simple example of a configuration for a chart. This example includes not only the basic set-up for the chart, but also sample data to demonstrate how the chart will look and behave.

Declaration:

<rapid-g2plot-chart></rapid-g2plot-chart>

Usage:

const chartConfiguration = {
    width: 700,
    xField: "value",
    yField: "groupBy",
    seriesField: "series",
    legend: {
      position: "top-left",
    },
  };

  const chartData = [
    { groupBy: "1951", value: 38, series: "3" },
    { groupBy: "1952", value: 52, series: "5" },
    { groupBy: "1956", value: 61, series: "1" },
    { groupBy: "1957", value: 145, series: "2" },
    { groupBy: "1958", value: 48, series: "4" },
    { groupBy: "1996", value: 38, series: "6" },
    { groupBy: "1997", value: 52, series: "7" },
    { groupBy: "1999", value: 61, series: "8" },
    { groupBy: "1995", value: 145, series: "9" },
    { groupBy: "1994", value: 48, series: "10" },
  ];


@customElement({
  name: 'g2plot-chart-example',
  template: html`
    <rapid-g2plot-chart
      type="bar"
      :config=${() => chartConfiguration}
      :data=${() => chartData}
    ></rapid-g2plot-chart>
  `,
})
export class G2PlotChartExample extends GenesisElement {}

info

After you have looked at the basics here, you can find more details in our API Docs