stockchart navigator and handles are not working

[Arshad]

Hi,

I have installed Stockchart with react.js and it was working just fine until today, all of a sudden, the slider navigator is not working and I cannot grab the handles to control the slider range.

Any help?

Thanks in advance.

[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;

[Manoj Mohan]

@arshad,

The code shared above seems to be working fine. Please take a look at this StackBlitz project for the same.

Can you kindly create a sample project reproducing the issue either in StackBlitz or locally & share it with us over Google-Drive or Onedrive. Also, kindly brief us more about the issue you are facing along with the version of CanvasJS StockChart that you are using so that we can understand the scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS

[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.

[Manoj Mohan]

@arshad,

Glad that you we able to figure it out.

—-
Manoj Mohan
Team CanvasJS