By enabling Charts module and Google Charts sub-module, Charts function won’t work out of the box in Drupal Views, Field or Node.
You must follow these five steps to download the relevant JavaScript files and add it to the libraries folder:
1. Ensure that you have the `composer/installers` package installed - it is installed
"composer/installers": "^1.9",
2. Ensure you have an installer-paths for the drupal-library type in your composer.json file
"installer-paths": {
"web/core": ["type:drupal-core"],
"web/libraries/{$name}": ["type:drupal-library"],
"web/modules/contrib/{$name}": ["type:drupal-module"],
"web/profiles/contrib/{$name}": ["type:drupal-profile"],
"web/themes/contrib/{$name}": ["type:drupal-theme"],
"drush/Commands/contrib/{$name}": ["type:drupal-drush"]
},
Pay attention to the "web/libraries/{$name}": ["type:drupal-library"],” entry. This is the location where the Google Charts JavaScript file will be stored.
3. In each submodule, there is a README.md file that has code to add to your
site's primary composer.json file.
cd ~/<your_website>/web/modules/contrib/charts/modules
ls -all
charts_api_example/ charts_billboard/ charts_blocks/ charts_c3/ charts_chartjs/ charts_google/ charts_highcharts/
4. For Google Charts
a. Add the following to the "installer-paths" section of "composer.json":
"web/libraries/{$name}": ["type:drupal-library"],
b. Add the following to the "repositories" section of "composer.json":
{
"type": "package",
"package": {
"name": "google/charts",
"version": "45",
"type": "drupal-library",
"extra": {
"installer-name": "google_charts"
},
"dist": {
"url": "https://www.gstatic.com/charts/loader.js",
"type": "file"
},
"require": {
"composer/installers": "^1.0 || ^2.0"
}
}
}
5. Run `composer require --prefer-dist google/charts:45`
6. Check - You should find that new directories have been created under "web/libraries"
libraries
google_charts
loader.js