I have a graphic chart displaying in my main page. The graph is displaying normally, but when I'm switching to a page within my application and getting back to the main page, the graph disappears.
I'm using a routing system in React to switch between my pages.
The react component of the graph that's rendering :
import React,{Component} from 'react';
class Widget1 extends React.Component{
render(){
return(
<div>
{/*begin::Stats Widget 1*/}
<div className="card card-custom gutter-b">
{/*begin::Body*/}
<div className="card-body p-0">
<div className="d-flex align-items-center justify-content-between card-spacer flex-grow-1">
<span className="symbol symbol-circle symbol-50 symbol-light-danger mr-2">
<span className="symbol-label">
<span className="svg-icon svg-icon-xl svg-icon-danger">
{/*begin::Svg Icon | path:assets/media/svg/icons/Layout/Layout-4-blocks.svg*/}
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
<rect x={0} y={0} width={24} height={24} />
<rect fill="#000000" x={4} y={4} width={7} height={7} rx="1.5" />
<path d="M5.5,13 L9.5,13 C10.3284271,13 11,13.6715729 11,14.5 L11,18.5 C11,19.3284271 10.3284271,20 9.5,20 L5.5,20 C4.67157288,20 4,19.3284271 4,18.5 L4,14.5 C4,13.6715729 4.67157288,13 5.5,13 Z M14.5,4 L18.5,4 C19.3284271,4 20,4.67157288 20,5.5 L20,9.5 C20,10.3284271 19.3284271,11 18.5,11 L14.5,11 C13.6715729,11 13,10.3284271 13,9.5 L13,5.5 C13,4.67157288 13.6715729,4 14.5,4 Z M14.5,13 L18.5,13 C19.3284271,13 20,13.6715729 20,14.5 L20,18.5 C20,19.3284271 19.3284271,20 18.5,20 L14.5,20 C13.6715729,20 13,19.3284271 13,18.5 L13,14.5 C13,13.6715729 13.6715729,13 14.5,13 Z" fill="#000000" opacity="0.3" />
</g>
</svg>
{/*end::Svg Icon*/}
</span>
</span>
</span>
<div className="d-flex flex-column text-right">
<span className="text-dark-75 font-weight-bolder font-size-h3">12000 dh</span>
<span className="text-muted font-weight-bold mt-2">Revenu hebdomadaire</span>
</div>
</div>
<div id="kt_stats_widget_11_chart" className="card-rounded-bottom" data-color="danger" style={{height: 150}} />
</div>
{/*end::Body*/}
</div>
{/*end::Stats Widget 1*/}
</div>
)
}
}
export default Widget1;
The javascript of the graph ( Months, color etc .. ) :
var _initStatsWidget11 = function () {
var element = document.getElementById("kt_stats_widget_11_chart");
var height = parseInt(KTUtil.css(element, 'height'));
var color = KTUtil.hasAttr(element, 'data-color') ? KTUtil.attr(element, 'data-color') : 'success';
if (!element) {
return;
}
var options = {
series: [{
name: 'Profit',
data: [40, 40, 30, 30, 35, 35, 50]
}],
chart: {
type: 'area',
height: 150,
toolbar: {
show: false
},
zoom: {
enabled: false
},
sparkline: {
enabled: true
}
},
plotOptions: {},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: 'solid',
opacity: 1
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [KTApp.getSettings()['colors']['theme']['base'][color]]
},
xaxis: {
categories: ['Jan','Feb', 'Mar', 'Apr', 'May', 'Jun', 'Aug', 'Sep'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
show: false,
style: {
colors: KTApp.getSettings()['colors']['gray']['gray-500'],
fontSize: '12px',
fontFamily: KTApp.getSettings()['font-family']
}
},
crosshairs: {
show: false,
position: 'front',
stroke: {
color: KTApp.getSettings()['colors']['gray']['gray-300'],
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px',
fontFamily: KTApp.getSettings()['font-family']
}
}
},
yaxis: {
min: 0,
max: 55,
labels: {
show: false,
style: {
colors: KTApp.getSettings()['colors']['gray']['gray-500'],
fontSize: '12px',
fontFamily: KTApp.getSettings()['font-family']
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px',
fontFamily: KTApp.getSettings()['font-family']
},
y: {
formatter: function (val) {
return "$" + val + " thousands"
}
}
},
colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
markers: {
colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
strokeColor: [KTApp.getSettings()['colors']['theme']['base'][color]],
strokeWidth: 3
}
};
var chart = new ApexCharts(element, options);
chart.render();
}
App.js for pages switching :
import Home from './pages/home';
import HeaderMenu from './components/HeaderMenu';
import Menu from './components/menu';
import Widget1 from './components/Widget1';
import Patient from './pages/patients';
import logo from './logo.svg';
import './App.css';
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
const App = () => {
return (
<div>
<Router>
<Menu />
<HeaderMenu />
<Switch>
<Route exact path="/" component={Home}>
<Home />
</Route>
<Route path='/patients' component={Patient}>
<Patient />
</Route>
</Switch>
</Router>
</div>
)
}
export default App;
If you start your application by /patients first then go to your app component then this wont work as well.
So, this is not a problem of going back and forth. your chart init function is being called in the beginning somewhere in your code so when your chart component renders at first the code gets the dom element and initializes it. But on navigation only the component code runs leaving the reinitialization behind. So, call the init function in your componentDidMount lifecycle of Home component where you need your chart.