BumpChart

import { BumpChart } from "@grassroot/charts-react";
 
<BumpChart data={[{ label: "API", ranks: [3, 1, 2] }, { label: "Web", ranks: [1, 2, 1] }]} labels={["Jan", "Feb", "Mar"]} />

<script setup lang="ts">
import { BumpChart } from "@grassroot/charts-vue";
</script>
 
<template>
  <BumpChart :data='[{ label: "API", ranks: [3, 1, 2] }, { label: "Web", ranks: [1, 2, 1] }]' :labels='["Jan", "Feb", "Mar"]' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootBumpChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-bump-chart-chart-demo",
  standalone: true,
  imports: [GrassrootBumpChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-bump-chart [data]='[{ label: "API", ranks: [3, 1, 2] }, { label: "Web", ranks: [1, 2, 1] }]' [labels]='["Jan", "Feb", "Mar"]' />`,
})
export class BumpChartDemoComponent {
 
}
 
export default BumpChartDemoComponent;

<script lang="ts">
  import { BumpChart } from "@grassroot/charts-svelte";
</script>
 
<BumpChart data={[{ label: "API", ranks: [3, 1, 2] }, { label: "Web", ranks: [1, 2, 1] }]} labels={["Jan", "Feb", "Mar"]} />

/** @jsxImportSource solid-js */
import { BumpChart } from "@grassroot/charts-solid";
 
export default function BumpChartDemo() {
  return <BumpChart data={[{ label: "API", ranks: [3, 1, 2] }, { label: "Web", ranks: [1, 2, 1] }]} labels={["Jan", "Feb", "Mar"]} />;
}