react-chartist | ⚛ React component for Chartist.js | Chart library

I'm coding a React articles app with Firebase as database. I would like to create a chart with the days of the week as the X axis and the number of words written in the textarea in the Y axis. I was able to do everything except figure out how to put this data correctly in the chart.

I'm trying to wrap my head around this problem. How can I conditionally render, using CSS ,the color of my line for my chartist graph depending on if the first value of Y is less than or more than the last value of Y in the data series?

An inline style would be something like: style={{ series[0] < series[-1] ? "red" : "green" }}

according to the docs, there is a style property used by the ChartistGraph component for inline-css styles, however I cant get it working.

I have added my code to reproduce the problem.

https://codesandbox.io/s/objective-ramanujan-35cij

Thank you for any help.

EDIT:

I'm having trouble parsing large JSON objects from my Axios calls and setting them as a state to then be passed as X and Y axis data for graphing in react-chartist. For my case, I'm charting stock market data.

I have been trying to parse the data using state hooks, chartData, but can't get it working, like so response.data.symbol, response.data.adj_close, and response.data.date

I also tried creating three different states, for X, Y, and symbol data taken directly from the axios call, but wasn't able to accomplish so.

Here is the code I'm using:

I installed plugin chartist-plugin-legend. I want to add legend to my chart, but get the error 'Chartist' is not defined no-undef. How i can add the legend to chart?

I use 'react-chartist'. I want to add the title of the plot, this is not working for me:

I'm having the following problem as shown in picture. The Component of creative tim's charts width and height is messed up. This is because of using Grow Transition of material UI. This is when first time component is loaded with transition

First Image

When i re-click on same tab, It loads perfectly fine but there's no transition since component is already mounted as shown in the following picture

second image

I've tried to use fixed width and height for the charts but no avail.

So how do i make work of this chart perfectly with material UI transitions(Grow,Slide) without loading problems?

I want to import table container for my react application. but I can't use it because of my material ui version error. How i update my version to latest version. I suppose that it's the solution for that error. I have already tried npm uninstall and npm uninstall, but didn't solve yet. Help me.