ComposedChart

import { ComposedChart } from "@grassroot/charts-react";
 
const xy = [
  { x: "Jan", y: 14 },
  { x: "Feb", y: 21 },
  { x: "Mar", y: 18 },
  { x: "Apr", y: 27 },
];
 
 
<ComposedChart layers={[{ kind: "bar", data: xy }, { kind: "line", data: xy }]} />

<script setup lang="ts">
import { ComposedChart } from "@grassroot/charts-vue";
 
const xy = [
  { x: "Jan", y: 14 },
  { x: "Feb", y: 21 },
  { x: "Mar", y: 18 },
  { x: "Apr", y: 27 },
];
</script>
 
<template>
  <ComposedChart :layers='[{ kind: "bar", data: xy }, { kind: "line", data: xy }]' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootComposedChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-composed-chart-chart-demo",
  standalone: true,
  imports: [GrassrootComposedChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-composed-chart [layers]='[{ kind: "bar", data: xy }, { kind: "line", data: xy }]' />`,
})
export class ComposedChartDemoComponent {
  readonly xy = [
    { x: "Jan", y: 14 },
    { x: "Feb", y: 21 },
    { x: "Mar", y: 18 },
    { x: "Apr", y: 27 },
  ];
}
 
export default ComposedChartDemoComponent;

<script lang="ts">
  import { ComposedChart } from "@grassroot/charts-svelte";
 
  const xy = [
    { x: "Jan", y: 14 },
    { x: "Feb", y: 21 },
    { x: "Mar", y: 18 },
    { x: "Apr", y: 27 },
  ];
</script>
 
<ComposedChart layers={[{ kind: "bar", data: xy }, { kind: "line", data: xy }]} />

/** @jsxImportSource solid-js */
import { ComposedChart } from "@grassroot/charts-solid";
 
const xy = [
  { x: "Jan", y: 14 },
  { x: "Feb", y: 21 },
  { x: "Mar", y: 18 },
  { x: "Apr", y: 27 },
];
 
export default function ComposedChartDemo() {
  return <ComposedChart layers={[{ kind: "bar", data: xy }, { kind: "line", data: xy }]} />;
}