Chart doesn't shpw up

[KevinBurton]

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?

[andrewhamili]

Experiencing the same problem. Is there something we are missing?

[mguomanila]

'react-chartist' has a peer dependency for 'chartist' which is version 0.10.1...check your version of 'chartist'

[andrewhamili]

Chartist version is 0.11.4

[yashvekaria]

Same here, CSS is not being loaded. How Can I resolve that?

[yashvekaria]

Sorry, it's written on Readme. This module does not include the css files for Chartist. So need to add manually <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">