Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update auto import in usage docs #10955

Merged
merged 1 commit into from Dec 10, 2022
Merged

Update auto import in usage docs #10955

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/getting-started/usage.md
View file
Open in desktop
Expand Up @@ -54,7 +54,7 @@ As you can see, Chart.js requires minimal markup: a `canvas` tag with an `id` by
Lastly, let’s create the `src/acquisitions.js` file with the following contents:

```jsx
import { Chart } from 'chart.js/auto'
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Named export Chart also exists there, so it is also a working code.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes but in the installation section we use this syntax since v3 so to be more consistent i like this approach more

import Chart from 'chart.js/auto'

(async function() {
const data = [
Expand Down Expand Up @@ -265,7 +265,7 @@ To create the chart, stop the already running application, then go to `src/index
Then, create the `src/dimensions.js` file with the following contents:

```jsx
import { Chart } from 'chart.js/auto'
import Chart from 'chart.js/auto'
import { getDimensions } from './api'

(async function() {
Expand Down Expand Up @@ -508,7 +508,7 @@ dist/index.ba0c2e17.js 881 B 63ms

We can see that Chart.js and other dependencies were bundled together in a single 265 KB file.

To reduce the bundle size, we’ll need to apply a couple of changes to `src/acquisitions.js` and `src/dimensions.js`. First, we’ll need to remove the following import statement from both files: `import { Chart } from 'chart.js/auto'`.
To reduce the bundle size, we’ll need to apply a couple of changes to `src/acquisitions.js` and `src/dimensions.js`. First, we’ll need to remove the following import statement from both files: `import Chart from 'chart.js/auto'`.

Instead, let’s load only necessary components and “register” them with Chart.js using `Chart.register(...)`. Here’s what we need in `src/acquisitions.js`:

Expand Down