MarimekkoChart

import { MarimekkoChart } from "@grassroot/charts-react";
 
const grouped = [
  { label: "Q1", values: [{ series: "new", value: 12, pattern: { kind: "diagonal" as const } }, { series: "returning", value: 22, pattern: { kind: "dots" as const } }] },
  { label: "Q2", values: [{ series: "new", value: 18, pattern: { kind: "diagonal" as const } }, { series: "returning", value: 26, pattern: { kind: "dots" as const } }] },
  { label: "Q3", values: [{ series: "new", value: 24, pattern: { kind: "diagonal" as const } }, { series: "returning", value: 31, pattern: { kind: "dots" as const } }] },
];
 
 
<MarimekkoChart data={grouped} />

<script setup lang="ts">
import { MarimekkoChart } from "@grassroot/charts-vue";
 
const grouped = [
  { label: "Q1", values: [{ series: "new", value: 12, pattern: { kind: "diagonal" as const } }, { series: "returning", value: 22, pattern: { kind: "dots" as const } }] },
  { label: "Q2", values: [{ series: "new", value: 18, pattern: { kind: "diagonal" as const } }, { series: "returning", value: 26, pattern: { kind: "dots" as const } }] },
  { label: "Q3", values: [{ series: "new", value: 24, pattern: { kind: "diagonal" as const } }, { series: "returning", value: 31, pattern: { kind: "dots" as const } }] },
];
</script>
 
<template>
  <MarimekkoChart :data='grouped' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootMarimekkoChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-marimekko-chart-chart-demo",
  standalone: true,
  imports: [GrassrootMarimekkoChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-marimekko-chart [data]='grouped' />`,
})
export class MarimekkoChartDemoComponent {
  readonly grouped = [
    { label: "Q1", values: [{ series: "new", value: 12, pattern: { kind: "diagonal" as const } }, { series: "returning", value: 22, pattern: { kind: "dots" as const } }] },
    { label: "Q2", values: [{ series: "new", value: 18, pattern: { kind: "diagonal" as const } }, { series: "returning", value: 26, pattern: { kind: "dots" as const } }] },
    { label: "Q3", values: [{ series: "new", value: 24, pattern: { kind: "diagonal" as const } }, { series: "returning", value: 31, pattern: { kind: "dots" as const } }] },
  ];
}
 
export default MarimekkoChartDemoComponent;

<script lang="ts">
  import { MarimekkoChart } from "@grassroot/charts-svelte";
 
  const grouped = [
    { label: "Q1", values: [{ series: "new", value: 12, pattern: { kind: "diagonal" as const } }, { series: "returning", value: 22, pattern: { kind: "dots" as const } }] },
    { label: "Q2", values: [{ series: "new", value: 18, pattern: { kind: "diagonal" as const } }, { series: "returning", value: 26, pattern: { kind: "dots" as const } }] },
    { label: "Q3", values: [{ series: "new", value: 24, pattern: { kind: "diagonal" as const } }, { series: "returning", value: 31, pattern: { kind: "dots" as const } }] },
  ];
</script>
 
<MarimekkoChart data={grouped} />

/** @jsxImportSource solid-js */
import { MarimekkoChart } from "@grassroot/charts-solid";
 
const grouped = [
  { label: "Q1", values: [{ series: "new", value: 12, pattern: { kind: "diagonal" as const } }, { series: "returning", value: 22, pattern: { kind: "dots" as const } }] },
  { label: "Q2", values: [{ series: "new", value: 18, pattern: { kind: "diagonal" as const } }, { series: "returning", value: 26, pattern: { kind: "dots" as const } }] },
  { label: "Q3", values: [{ series: "new", value: 24, pattern: { kind: "diagonal" as const } }, { series: "returning", value: 31, pattern: { kind: "dots" as const } }] },
];
 
export default function MarimekkoChartDemo() {
  return <MarimekkoChart data={grouped} />;
}