Chartjs-Chartjs chart not showing

check steps :

Check your HTML structure: Ensure that you have four separate containers (e.g., <canvas> elements) in your blade file to hold each chart. Make sure you have unique IDs for each container, such as top3cropcomm, top3lscomm, and croptrade. Double-check that these IDs match the IDs used in your JavaScript code when initializing the charts.

Check your JavaScript configurations: Pay attention to the variable names you use for each chart’s data and configuration objects. It appears that you have mistakenly assigned the chart configurations to the top3ls_config and croptrade_config variables, but you’re initializing the charts with top3LS_Chart instead of top3ls_chart and top3LS_Chart again.

Verify the data retrieval and formatting: Ensure that the data you retrieve from the URLs (url, ls_comms_url, crop_trade_url) is correct and properly formatted. Double-check the property names (commodity, com_sum, crop_total_value, year) to match the actual response structure.

Check for JavaScript errors: Even if you don’t see any errors in the console, it’s a good idea to inspect the network requests in the browser’s developer tools. Make sure the requests to retrieve the data from the URLs (url, ls_comms_url, crop_trade_url) are successful and return the expected data. If any errors occur during the requests, it might prevent the charts from being displayed.