score:0
Accepted answer
for your first trial, try to remove curly brackets
at charttobedisplayed
.
{this.state.isloaded ? charttobedisplayed : <div>loading...</div>}
as long as the grammar of your chart is correct, it should work.
for your second trial.
chart.js
only set state at initial mount.
thus, when you update state on app.js
and pass new props - charttype
to chart.js
, you need to update the local state
.
try to add componentwillreceiveprops
at chart.js
component.
class chart extends component {
constructor(props) {
...
}
componentwillreceiveprops(nextprops) {
if (nextprops.charttype !== this.state.charttype) {
this.setstate({charttype: nextprops.charttype})
}
}
}
updated
for preventing misunderstand, chart.js
mentioned above means the chart.js
file posted on question.
Source: stackoverflow.com
Related Query
- React - render Chart.js chart based on user selection, after Ajax returns JSON
- Charts js and laravel: Render chart after passing in json data
- Chart js - Get bar width after render
- React render Chart.js based on api response
- How do I display chart on my HTML page based on JSON data sent by Node JS
- ChartJs Memory Leak | Garbage Collection does not clean Chart Object or Arrays after render
- VueJS + Chartjs - Chart only renders after code change
- React js with react-chart js, does not render doughnut chart
- After rendering one chart when trying to render a new one chart.js gives "Check that a complete date adapter is provided."
- ChartJS fails to render one of the lines in cartesian chart following update after change to max Y axis label value
- Need to update tool tip value based on drop down filter after ajax call
- PHP render stacked area chart of JSON dataset
- Javascript not populate chart after retrieve json data
- Can't get bar chart colors in Chart js working in React Js
- React ChartJS prevent new data from being added into state after it's redrawn?
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- Callback after line chart rendered
- Drawing line chart in chart.js with json response
- React ChartJS 2 : Get data on clicking the chart
- Chart disappears just after finishing animation
- Parsing JSON data into Chart.js bar chart
- How to dynamically set ChartJs line chart width based on dataset size?
- chart.js bar chart color change based on value
- Time Series Line chart js in react not working
- chart js with angular2 loading dynamic data only after zoomin
- Dynamically created Chart.js chart overpopulating time based x-axis?
- Stacked bar chart starting from 0 - ChartJS React
- Chart not displaying from JSON data
- Chart.js plotting two json datasets on a line chart
- ChartJS changing graphs based upon Drop Down selection
More Query from same tag
- Changing the background of a ChartJS on node js
- Chart.js - Increase spacing between legend and chart
- Modifying the X-Axis Labels of a Bar chart in Chart.js 2
- Display text in center of doughnut
- Chart.js chart flickering when re-opening page
- Getting TypeError: (intermediate value).Bar is not a function with react and chart.js
- How to put an image a circle chart
- Why are more columns on one labels in Angular ChartJS?
- Chart.js Bar graph with percentage values
- Chartjs: display value in html element when hovering a bar
- Chart.js bar thickness
- How to make chartjs pie chart responsive
- Chart Js invisible horizontal bar
- is there anything wrong with this If Condition in Javascript code?
- My chartJS axios.get is fired twice causing chart to render twice too and i don't know why. I'm using react-chartjs-2
- Create a heatmap/punchcard Using Chart.js
- chart.js bar chart x-axis label disappeared
- Use outside variables inside a TypeScript function.
- Bars centered between the grid lines with the label below the grid lines (chart.js)
- Chart.js - Is it possible to have two y axis with positive values one above the other?
- Angular: How to change color of chartjs?
- How do I prevent Chartjs tooltip callback returning multiple instances of the same value?
- Chartjs Doughnut Chart smooth animation in countdown
- How to remove the Legend of chart from angular Chart.js
- Create a arc like doughnut chart with Chart js plugins
- How to install Chart.js in Laravel? ("Uncaught ReferenceError: Chart is not defined")
- Chart.js is not displayed when page loads first time
- Chartjs isn't rendering bar chart, even though chart variable shows correctly when console logged
- Input data in german data format combined with ChartsJs
- How to use plugins in chartjs and laravel chart consoletvs/chartsjs