Bar Chart
The following file represents the data structure that the simulation must output for the graph to be plotted as a bar graph
type BarChartData = {
title: string;
xlabel: string;
ylabel: string;
data: {
x: string[] | number[]; // categories for each bar [cat1, cat2, cat3, ...]
labels: string[]; // each label is a line ["label1", "label2", "label3"]
y: number[][]; // each array is a line [[label1_cat1_val, label2_cat1_val, label3_cat_1_val], [...], [...]]
ymin?: number[][]; // same format as y
ymax?: number[][]; // same format as y
};
};The x values are the categories for each bar, for example these could be the stages in the Histo-Path lab.
The labels are the labels for each bar in the category, for example these could be the target and actual values for each stage. The y values are the values for each label in each category, the first index represents the category and the second index represents the label. The error values are the error bars for each label in each category, the first index represents the category and the second index represents the label.
Examples
Note in these examples we omit the title, xlabel, and ylabel for brevity.
One Bar
One Bar
<BarChart
data={{
x: ["Stage 1", "Stage 2", "Stage 3"],
labels: ["Actual"],
y: [[1, 2, 3]],
}}
title="One Bar"
xlabel="Stages"
ylabel="Values"
/>Two Bars
Two Bar
<BarChart
data={{
x: ["Stage 1", "Stage 2", "Stage 3"],
labels: ["Actual", "Target"],
y: [
[1, 2, 3], // actual values
[0.5, 3, 3], // target values
],
}}
title="Two Bars"
xlabel="Stages"
ylabel="Values"
/>Error Bars
Error Bars
<BarChart
data={{
x: ["Stage 1", "Stage 2", "Stage 3"],
labels: ["Actual", "Target"],
y: [
[1, 2, 3], // actual values
[0.5, 3, 3], // target values
],
ymin: [
[0.1, 0.2, 0.3], // actual values
[0.1, 0.2, 0.3], // target values
],
ymax: [
[1.1, 3.2, 5.3], // actual values
[1.1, 3.2, 5.3], // target values
],
}}
title="Error Bars"
xlabel="Stages"
ylabel="Values"
/>