For some reason, hopefully someone here can find out what my, chart is not showing up. I suspect it has something to do with TypeScript though I have not been able to prove it. Here is what I would post as a sandbox example (I don't seem to be able to save a sandbox)
import * as React from "react";
import ChartistGraph from "react-chartist";
import "./styles.css";
export default function App() {
const chartLabels:string[] = [
"Milwaukee", "Dane", "Brown", "Waukesha", "Racine", "Kenosha", "Rock", "Walworth", "Outagamie", "Winnebago", "Washington", "La Crosse", "Dodge", "Sheboygan", "Ozaukee", "Fond du Lac", "Marathon", "Jefferson", "Eau Claire", "St. Croix", "Waupaca", "Sauk", "Portage", "Marinette", "Grant", "Trempealeau", "Manitowoc", "Calumet", "Barron", "Wood", "Columbia", "Monroe", "Oconto", "Chippewa", "Pierce", "Shawano", "Clark", "Douglas", "Green", "Juneau", "Polk", "Kewaunee", "Lafayette", "Oneida", "Dunn", "Waushara", "Door", "Adams", "Iowa", "Marquette", "Iron", "Crawford", "Taylor", "Lincoln", "Langlade", "Vernon", "Sawyer", "Forest", "Jackson", "Green Lake", "Vilas", "Washburn", "Buffalo", "Pepin", "Richland", "Price", "Ashland", "Bayfield", "Menominee", "Burnett", "Rusk", "Florence"
];
const chartSeries:number[] = [
20920,4492,4240,4188,3499,2659,1425,1314,1236,1164,1039,896,808,742,676,635,629,624,574,485,442,433,405,387,352,336,332,313,291,286,245,242,237,227,209,190,183,172,158,137,131,130,130,124,122,115,103,85,79,79,74,74,69,68,63,62,59,59,58,55,53,45,43,42,37,33,24,23,22,22,20,8
];
const chartOptions =
{
data: {
labels: chartLabels,
series: [chartSeries]
},
options: {
axisX: {
showGrid: false
},
low: Math.min(...chartSeries),
high: Math.max(...chartSeries),
chartPadding: {
top: 0,
right: 5,
bottom: 0,
left: 0
}
}
};
return (
<ChartistGraph
className="ct-chart"
data={chartOptions.data}
type="Bar"
options={chartOptions.options}
/>
);
}As can be see the chart labels show up (all be it jumbled) but there are no bars?
For some reason, hopefully someone here can find out what my, chart is not showing up. I suspect it has something to do with TypeScript though I have not been able to prove it. Here is what I would post as a sandbox example (I don't seem to be able to save a sandbox)
As can be see the chart labels show up (all be it jumbled) but there are no bars?