[Arshad]

Thank you, I fixed it. the mistake was mine in the CSS when I targeted the slider class and it stopped by mistake.

thanks again for this really nice and helpful tool.

[Arshad]

import CanvasJSReact from “@canvasjs/react-stockcharts”;
import { useEffect, useState } from “react”;
import “./style.scss”;

const CanvasJSStockChart = CanvasJSReact.CanvasJSStockChart;
const TotalMaterial = () => {
const [dataPoints, setDataPoints] = useState([]);
const [isLoaded, setIsLoaded] = useState(false);

useEffect(() => {
fetch(“https://canvasjs.com/data/gallery/react/btcusd2017-18.json”)
.then((res) => res.json())
.then((data) => {
const dps = data.map((item) => ({
x: new Date(item.date),
y: Number(item.close),
}));
setDataPoints(dps);
setIsLoaded(true);
});
}, []);

const options = {
height: 450,
title: {
text: “”,
horizontalAlign: “left”,
fontSize: 18,
fontFamily: “Nunito”,
fontWeight: “normal”,
margin: 10,
padding: 12,
},
theme: “light2”,
charts: [
{
axisX: {
crosshair: {
enabled: true,
snapToDataPoint: true,
valueFormatString: “MM YYYY”,
margin: 15,
},
},
axisY: {
title: “Material unites”,
prefix: “”,
crosshair: {
enabled: true,
snapToDataPoint: true,
valueFormatString: “#,###.##”,
margin: 15,
},
},
toolTip: {
shared: true,
cornerRadius: 8,
backgroundColor: “#BACDE8”,
},
data: [
{
name: “Amount”,
type: “splineArea”,
color: “#3576a8”,
yValueFormatString: “#,###”,
xValueFormatString: “MMM DD YYYY”,
dataPoints: dataPoints,
lineColor: “#2058A8”,
fillOpacity: 0.4,
},
],
},
],
navigator: {
slider: {
minimum: new Date(“2017-05-01”),
maximum: new Date(“2018-05-01”),
maskColor: “#a0beec”,
},
},
rangeSelector: {
inputFields: {
enabled: false,
},
buttons: [
{
range: 1,
rangeType: “month”,
label: “1 Month”,
},
{
range: 3,
rangeType: “month”,
label: “3 Months”,
},
{
range: 6,
rangeType: “month”,
label: “6 Months”,
},
{
range: 12,
rangeType: “month”,
label: “1 Year”,
},
],
},
};

const containerProps = {
width: “100%”,
margin: “auto”,
};

return (
<div className=”chartContainer”>
{isLoaded && (
<CanvasJSStockChart containerProps={containerProps} options={options} />
)}
</div>
);
};

export default TotalMaterial;