@rcsb/rcsb-charts
Version:
63 lines • 1.99 kB
JavaScript
import * as React from "react";
import { createRoot } from "react-dom/client";
import { ChartComponent } from "../RcsbChartComponent/ChartComponent";
import { HistogramChartDataProvider } from "../RcsbChartDataProvider/HistogramChartDataProvider";
import { ChartJsHistogramComponent } from "../RcsbChartImplementations/ChatJsImplementations/ChartJsHistogramComponent";
const node = document.getElementById("chart-element");
if (node == null)
throw `ERROR: HTML element not found`;
const data = [
[{
label: 1,
population: 1
}, {
label: 2,
population: 2
}, {
label: 3,
population: 3
}], [{
label: 1,
population: 1
}, {
label: 2,
population: 2
}, {
label: 3,
population: 3,
objectConfig: {
color: "#f00",
objectId: "2_3"
}
}], [{
label: 3,
population: 3,
objectConfig: {
color: "#0f0",
objectId: "3_3"
}
}], [{
label: 4,
population: 4,
objectConfig: {
color: "#00f",
objectId: "4_4"
}
}]
];
const root = createRoot(node);
root.render(React.createElement(ChartComponent, { data: data, chartComponentImplementation: ChartJsHistogramComponent, dataProvider: new HistogramChartDataProvider(), chartConfig: {
histogramBinIncrement: 1,
tooltipText: (a) => {
if (typeof a.id == "string")
return ['Title King', `value: ${a.y}`, `x: ${a.x}`, `id: ${a.id}`];
},
barClickCallback: (a) => console.log(a),
chartDisplayConfig: {
constHeight: 1000
},
domainMaxValue: 10,
domainMinValue: 0,
axisLabel: "Axis Label"
} }));
//# sourceMappingURL=StackHistogram.js.map