Conditional CSS for chartist.js graph

Question

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.

<ChartistGraph data={data} options={options} type={type} style={style} />

I have added my code to reproduce the problem.

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

Thank you for any help.

EDIT:

import React from "react";


import ChartistGraph from "react-chartist";
import "./styles.css";


export function MiniGraphs(props)
{
  const { historicalPrice, dateRange, symbol } = props;
  
  const filterBySymbol = (symbol, key) =>
  historicalPrice
    .filter((elm) => elm.symbol === symbol)
    .map((elm) => elm[key]);


  const mapper = {
    labels: filterBySymbol(symbol, "date"),
    series: [filterBySymbol(symbol, "adj_close")]
  };

  const getChartData = () =>
  {
    const labels = [];
    const series = [];

    historicalPrice.slice(-dateRange).forEach((item,) =>
    {
      if (dateRange === 5)
      {
        labels.push(item.date[0]);
        series.push(item.close);
      }
      if (dateRange === 30)
      {
        labels.push(item.date.slice(3,10));
        series.push(item.close);
      }
      if (dateRange === 60)
      {
        labels.push(item.date.slice(3,7));
        series.push(item.close);
      }
      if (dateRange === 253)
      {
        labels.push(item.date.slice(3,7));
        series.push(item.close);
      }
    });

    return {
      labels: labels,
      series: [series]
    };
  };
  

  // Add graph configuration here
  const chartOptions = {
    showGrid: false,
    chartPadding: 15,
    showGridBackground: false,
    // width: 2000,
    height: "150",
    labelOffset: 200,
    // scaleMinSpace: 20
    onlyInteger: true,
    showPoint: false,
    showArea: true,
    axisX: {
      labelInterpolationFnc: function (value, index)
      {
        if (dateRange === 5)
        {
          return index % 1 === 0 ? value : null;
        }
        if (dateRange === 30)
        {
          return index % 15 === 0 ? value : null;
        }
        if (dateRange === 60)
        {
          return index % 20 === 0 ? value : null;
        }
        if (dateRange === 253)
        {
          return index % 60 === 0 ? value : null;
        }
      },
    }
  };

  // Get all values
  const all = mapper.series[0];

  // Get first + last
  const first = all[0];
  const last = all[all.length - 1];

  // Get className
  const lineColor = first > last ? "red" : "green";

  return (
    <>
      { historicalPrice && (
        <ChartistGraph
          className={"line-" + lineColor}
          data={getChartData()}
          options={chartOptions}
          type="Line"
        />
      )}
    </>
  );
}

                                  <MiniGraphs
                                    historicalPrice={historicalPrice.filter(
                                      (i) => i.symbol === data.symbol
                                    )}
                                      dateRange={date}
                                      symbol={data.symbol}
                                    />

.line-red .ct-line {
  stroke: red !important;
}
.line-green .ct-line {
  stroke: green !important;
}

Answer 1

Inside the MiniGraphs component, you can get the desired values, and use a className to change the desired line colour like so:

// Get all values
const all = mapper.series[0];

// Get first + last
const first = all[0];
const last = all[all.length - 1];

// Get className
const lineColor = first > last ? "red" : "green";

// Render
return (
    <>
        {
            historicalPrice && (
                <ChartistGraph
                    className={"line-" + lineColor} // <-- Add className
                    data={mapper}
                    options={chartOptions}
                    type="Line"
                />
            )
        }
    </>
)

Then, using some simple css you can change the line color like so: \

.line-red .ct-line {
  stroke: red !important;
}
.line-green .ct-line {
  stroke: green !important;
}

Don't forget to include the style file: import './styles.css';

Updated sandbox