Showing preview only (527K chars total). Download the full file or copy to clipboard to get everything.
Repository: chartist-js/chartist
Branch: main
Commit: f4eaee26871b
Files: 281
Total size: 467.6 KB
Directory structure:
gitextract_93mw5ltc/
├── .browserslistrc
├── .clean-publish
├── .commitlintrc.json
├── .czrc
├── .editorconfig
├── .eslintrc.json
├── .gitattributes
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug-report.yml
│ │ ├── config.yml
│ │ └── feature-request.yml
│ ├── renovate.json
│ └── workflows/
│ ├── checks.yml
│ ├── ci.yml
│ ├── commit.yml
│ ├── release.yml
│ ├── update-storyshots.yml
│ └── website.yml
├── .gitignore
├── .nano-staged.json
├── .npmrc
├── .nvmrc
├── .prettierrc
├── .simple-git-hooks.json
├── .simple-release.json
├── .size-limit.json
├── .storybook/
│ ├── main.js
│ ├── manager.js
│ ├── package.json
│ ├── preview.js
│ └── theme.js
├── .tool-versions
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE-MIT
├── LICENSE-WTFPL
├── README.md
├── jest.config.json
├── package.json
├── pnpm-workspace.yaml
├── postcss.config.cjs
├── rollup.config.js
├── sandboxes/
│ ├── bar/
│ │ ├── bi-polar-interpolated/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── distributed-series/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── extreme-responsive/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── horizontal/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── label-position/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── multiline/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── overlapping-bars/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── stacked/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── stacked-accumulate-relative/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ └── with-circle-modify-drawing/
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── package.json
│ │ └── sandbox.config.json
│ ├── line/
│ │ ├── area/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── axis-auto/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── axis-fixed-and-auto/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── bipolar-area/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── data-fill-holes/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── data-holes/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── modify-drawing/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── only-integer/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── path-animation/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── scatter-random/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── series-override/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── simple/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── simple-responsive/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── simple-smoothing/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── simple-svg-animation/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── svg-animation/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ └── timeseries/
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── package.json
│ │ └── sandbox.config.json
│ ├── pie/
│ │ ├── custom-labels/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── donut-animation/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── donut-chart/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── simple/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ └── simple-gauge/
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── package.json
│ │ └── sandbox.config.json
│ └── tsconfig.json
├── scripts/
│ └── styles.cjs
├── src/
│ ├── axes/
│ │ ├── AutoScaleAxis.ts
│ │ ├── Axis.spec.ts
│ │ ├── Axis.ts
│ │ ├── FixedScaleAxis.spec.ts
│ │ ├── FixedScaleAxis.ts
│ │ ├── StepAxis.spec.ts
│ │ ├── StepAxis.ts
│ │ ├── index.ts
│ │ └── types.ts
│ ├── charts/
│ │ ├── BarChart/
│ │ │ ├── BarChart.spec.ts
│ │ │ ├── BarChart.stories.ts
│ │ │ ├── BarChart.ts
│ │ │ ├── BarChart.types.ts
│ │ │ └── index.ts
│ │ ├── BaseChart.ts
│ │ ├── LineChart/
│ │ │ ├── LineChart.spec.ts
│ │ │ ├── LineChart.stories.ts
│ │ │ ├── LineChart.ts
│ │ │ ├── LineChart.types.ts
│ │ │ └── index.ts
│ │ ├── PieChart/
│ │ │ ├── PieChart.spec.ts
│ │ │ ├── PieChart.stories.ts
│ │ │ ├── PieChart.ts
│ │ │ ├── PieChart.types.ts
│ │ │ └── index.ts
│ │ ├── index.ts
│ │ └── types.ts
│ ├── core/
│ │ ├── constants.ts
│ │ ├── creation.spec.ts
│ │ ├── creation.ts
│ │ ├── data/
│ │ │ ├── bound.spec.ts
│ │ │ ├── bounds.ts
│ │ │ ├── data.ts
│ │ │ ├── highLow.ts
│ │ │ ├── index.ts
│ │ │ ├── normalize.spec.ts
│ │ │ ├── normalize.ts
│ │ │ ├── segments.spec.ts
│ │ │ ├── segments.ts
│ │ │ ├── serialize.spec.ts
│ │ │ └── serialize.ts
│ │ ├── index.ts
│ │ ├── lang.spec.ts
│ │ ├── lang.ts
│ │ ├── math.ts
│ │ ├── optionsProvider.ts
│ │ └── types.ts
│ ├── event/
│ │ ├── EventEmitter.ts
│ │ └── index.ts
│ ├── index.ts
│ ├── interpolation/
│ │ ├── cardinal.ts
│ │ ├── index.ts
│ │ ├── monotoneCubic.ts
│ │ ├── none.ts
│ │ ├── simple.ts
│ │ └── step.ts
│ ├── styles/
│ │ ├── _settings.scss
│ │ └── index.scss
│ ├── svg/
│ │ ├── Svg.spec.ts
│ │ ├── Svg.ts
│ │ ├── SvgList.ts
│ │ ├── SvgPath.spec.ts
│ │ ├── SvgPath.ts
│ │ ├── animation.ts
│ │ ├── index.ts
│ │ └── types.ts
│ └── utils/
│ ├── extend.ts
│ ├── functional.ts
│ ├── index.ts
│ ├── types.ts
│ └── utils.ts
├── test/
│ ├── mock/
│ │ ├── cssModule.js
│ │ └── dom.ts
│ ├── setup.js
│ ├── storyshots.spec.js
│ └── utils/
│ ├── skipable.js
│ └── storyshots/
│ ├── imageSnapshotWithStoryParameters.js
│ ├── index.js
│ ├── initStoryshots.js
│ ├── storybook.js
│ └── viewport.ts
├── tsconfig.build.json
├── tsconfig.json
└── website/
├── .gitignore
├── CNAME
├── README.md
├── babel.config.js
├── docs/
│ ├── api/
│ │ ├── .gitignore
│ │ ├── basics.md
│ │ └── docs.js
│ ├── docs.js
│ ├── examples/
│ │ ├── bar-chart.mdx
│ │ ├── docs.js
│ │ ├── index.mdx
│ │ ├── line-chart.mdx
│ │ └── pie-chart.mdx
│ ├── index.mdx
│ ├── plugins.md
│ ├── what-is-it-made-for.md
│ └── whats-new-in-v1.md
├── docusaurus.config.js
├── package.json
├── sidebars.js
├── src/
│ ├── components/
│ │ └── ContextProvider.tsx
│ ├── css/
│ │ ├── custom.css
│ │ └── recoloring.css
│ └── prism-theme.js
├── static/
│ └── .nojekyll
└── tsconfig.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .browserslistrc
================================================
defaults
not ie 11
not ie_mob 11
================================================
FILE: .clean-publish
================================================
{
"withoutPublish": true,
"tempDir": "package"
}
================================================
FILE: .commitlintrc.json
================================================
{
"extends": ["@commitlint/config-conventional"],
"rules": {
"body-max-line-length": [0]
}
}
================================================
FILE: .czrc
================================================
{
"path": "@commitlint/cz-commitlint"
}
================================================
FILE: .editorconfig
================================================
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 2
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .eslintrc.json
================================================
{
"extends": ["eslint:recommended", "plugin:prettier/recommended"],
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaVersion": "latest",
"requireConfigFile": false
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"rules": {
"no-console": 2,
"curly": 2,
"dot-notation": 1,
"eqeqeq": 2,
"no-alert": 2,
"no-caller": 2,
"no-eval": 2,
"no-extra-bind": 2,
"no-implied-eval": 2,
"no-multi-spaces": 2,
"no-with": 2,
"no-shadow": 2,
"no-shadow-restricted-names": 2,
"brace-style": ["error", "1tbs"],
"camelcase": 2,
"comma-style": ["error", "last"],
"eol-last": 2,
"key-spacing": 2,
"new-cap": 1,
"no-array-constructor": 2,
"no-mixed-spaces-and-tabs": 2,
"no-multiple-empty-lines": 2,
"semi-spacing": 2,
"no-spaced-func": 2,
"no-trailing-spaces": 2,
"space-before-blocks": 2,
"spaced-comment": 1,
"no-var": 2
},
"overrides": [
{
"files": ["**/*.ts"],
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": ["plugin:@typescript-eslint/recommended"]
},
{
"files": ["test/**/*.{js,ts}", "*.spec.{js,ts}", "*.stories.{js,ts}"],
"plugins": [
"jest",
"testing-library",
"jest-dom"
],
"extends": ["plugin:jest-dom/recommended"],
"env": {
"jest/globals": true
},
"rules": {
"no-console": 0,
"no-shadow": 0,
"@typescript-eslint/no-explicit-any": 0
}
}
]
}
================================================
FILE: .gitattributes
================================================
* text=auto
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: gionkunz
================================================
FILE: .github/ISSUE_TEMPLATE/bug-report.yml
================================================
name: "🐛 Bug Report"
description: "If something isn't working as expected."
title: "[Bug]: "
labels: ["bug"]
body:
- type: markdown
attributes:
value: Thanks for taking the time to file a bug report! Please fill out this form as completely as possible.
- type: checkboxes
id: input1
attributes:
label: Would you like to work on a fix?
options:
- label: Check this if you would like to implement a PR, we are more than happy to help you go through the process.
- type: textarea
attributes:
label: Current and expected behavior
description: A clear and concise description of what the library is doing and what you would expect.
validations:
required: true
- type: input
attributes:
label: Reproduction
description: |
Please provide issue reproduction.
You can give a link to a repository with the reproduction or make a [sandbox](https://codesandbox.io/) and reproduce the issue there.
validations:
required: true
- type: input
attributes:
label: Chartist version
description: Which version of Chartist are you using?
placeholder: v0.0.0
validations:
required: true
- type: textarea
attributes:
label: Possible solution
description: If you have suggestions on a fix for the bug.
================================================
FILE: .github/ISSUE_TEMPLATE/config.yml
================================================
blank_issues_enabled: false
contact_links:
- name: 🤔 Have a Question?
url: https://stackoverflow.com/questions/tagged/chartist.js
about: Feel free to ask questions on Stack Overflow.
================================================
FILE: .github/ISSUE_TEMPLATE/feature-request.yml
================================================
name: "🚀 Feature Request"
description: "I have a specific suggestion!"
labels: ["enhancement"]
body:
- type: markdown
attributes:
value: Thanks for taking the time to suggest a new feature! Please fill out this form as completely as possible.
- type: checkboxes
id: input1
attributes:
label: Would you like to work on this feature?
options:
- label: Check this if you would like to implement a PR, we are more than happy to help you go through the process.
- type: textarea
attributes:
label: What problem are you trying to solve?
description: |
A concise description of what the problem is.
placeholder: |
I have an issue when [...]
validations:
required: true
- type: textarea
attributes:
label: Describe the solution you'd like
validations:
required: true
- type: textarea
attributes:
label: Describe alternatives you've considered
- type: textarea
attributes:
label: Documentation, Adoption, Migration Strategy
description: |
If you can, explain how users will be able to use this and how it might be documented. Maybe a mock-up?
================================================
FILE: .github/renovate.json
================================================
{
"extends": [
"config:base",
":preserveSemverRanges"
]
}
================================================
FILE: .github/workflows/checks.yml
================================================
name: Checks
on:
pull_request:
branches:
- main
jobs:
size:
runs-on: ubuntu-latest
name: size-limit
steps:
- name: Checkout the repository
uses: actions/checkout@v5
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 7
- name: Install Node.js
uses: actions/setup-node@v5
with:
node-version: 16
cache: 'pnpm'
- name: Check size
uses: andresz1/size-limit-action@master
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
storybook:
runs-on: ubuntu-latest
name: storybook
steps:
- name: Checkout the repository
uses: actions/checkout@v5
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 7
- name: Install Node.js
uses: actions/setup-node@v5
with:
node-version: 16
cache: 'pnpm'
- name: Install dependencies
run: pnpm install
- name: Check storybook
run: pnpm build:storybook
editorconfig:
runs-on: ubuntu-latest
name: editorconfig
steps:
- name: Checkout the repository
uses: actions/checkout@v5
- name: Check editorconfig
uses: editorconfig-checker/action-editorconfig-checker@v1
website:
runs-on: ubuntu-latest
name: website
steps:
- name: Checkout the repository
uses: actions/checkout@v5
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 7
- name: Install Node.js
uses: actions/setup-node@v5
with:
node-version: 16
cache: 'pnpm'
- name: Install dependencies
run: pnpm install
- name: Check website
run: pnpm build
working-directory: ./website
================================================
FILE: .github/workflows/ci.yml
================================================
name: CI
on:
pull_request:
push:
branches:
- main
jobs:
test:
runs-on: ubuntu-latest
strategy:
matrix:
stage:
- unit
- storyshots
fail-fast: false
name: ${{ matrix.stage }} tests
steps:
- name: Checkout the repository
uses: actions/checkout@v5
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 7
- name: Install Node.js
uses: actions/setup-node@v5
with:
node-version: 16
cache: 'pnpm'
- name: Install dependencies
run: pnpm install
- name: Run tests
run: pnpm test:${{ matrix.stage }}
- name: Collect coverage
uses: codecov/codecov-action@v5
if: "success() && matrix.stage == 'unit'"
with:
files: ./coverage/lcov.info
- name: Collect artifacts
uses: actions/upload-artifact@v4
if: "failure() && matrix.stage != 'unit'"
with:
name: Image snapshots (${{ matrix.stage }})
path: test/__image_snapshots__/
================================================
FILE: .github/workflows/commit.yml
================================================
name: Commit
on:
push:
jobs:
commitlint:
runs-on: ubuntu-latest
name: commitlint
steps:
- name: Checkout the repository
uses: actions/checkout@v5
with:
fetch-depth: 0
- name: Run commitlint
uses: wagoid/commitlint-github-action@v4
================================================
FILE: .github/workflows/release.yml
================================================
name: Release
on:
issue_comment:
types: [created, deleted]
push:
branches:
- main
jobs:
check:
runs-on: ubuntu-latest
name: Context check
outputs:
continue: ${{ steps.check.outputs.continue }}
workflow: ${{ steps.check.outputs.workflow }}
steps:
- name: Checkout the repository
uses: actions/checkout@v5
- name: Context check
id: check
uses: trigensoftware/simple-release-action@latest
with:
workflow: check
github-token: ${{ secrets.GITHUB_TOKEN }}
pull-request:
runs-on: ubuntu-latest
name: Pull request
needs: check
if: needs.check.outputs.workflow == 'pull-request'
steps:
- name: Checkout the repository
uses: actions/checkout@v5
- name: Create or update pull request
uses: trigensoftware/simple-release-action@latest
with:
workflow: pull-request
github-token: ${{ secrets.GITHUB_TOKEN }}
release:
runs-on: ubuntu-latest
name: Release
needs: check
if: needs.check.outputs.workflow == 'release'
steps:
- name: Checkout the repository
uses: actions/checkout@v5
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 7
- name: Install Node.js
uses: actions/setup-node@v5
with:
node-version: 16
cache: 'pnpm'
registry-url: 'https://registry.npmjs.org'
- name: Install dependencies
run: pnpm install
- name: Release
uses: trigensoftware/simple-release-action@latest
with:
workflow: release
github-token: ${{ secrets.GITHUB_TOKEN }}
npm-token: ${{ secrets.NPM_TOKEN }}
================================================
FILE: .github/workflows/update-storyshots.yml
================================================
name: Update storyshots
on: workflow_dispatch
jobs:
update-storyshots:
runs-on: ubuntu-latest
name: storyshots
steps:
- name: Checkout the repository
uses: actions/checkout@v5
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 7
- name: Install Node.js
uses: actions/setup-node@v5
with:
node-version: 16
cache: 'pnpm'
- name: Install dependencies
run: pnpm install
- name: Update snapshots
run: pnpm test:storyshots -u
- name: Collect artifacts
uses: actions/upload-artifact@v4
if: always()
with:
name: Updated storyshots
path: test/__image_snapshots__/
================================================
FILE: .github/workflows/website.yml
================================================
name: Website
on:
push:
branches:
- main
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow one concurrent deployment
concurrency:
group: "pages"
cancel-in-progress: true
jobs:
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
name: deploy website
steps:
- name: Checkout the repository
uses: actions/checkout@v5
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 7
- name: Install Node.js
uses: actions/setup-node@v5
with:
node-version: 16
cache: 'pnpm'
- name: Install dependencies
run: pnpm install
- name: Build website
run: pnpm build
working-directory: ./website
- name: Setup Pages
uses: actions/configure-pages@v5
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: './website/build'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
================================================
FILE: .gitignore
================================================
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
node_modules
# builds
package
dist
storybook-static
# misc
.DS_Store
npm-debug.log*
# testing
coverage
================================================
FILE: .nano-staged.json
================================================
{
"**/*.{js,ts}": ["prettier --write", "eslint"]
}
================================================
FILE: .npmrc
================================================
strict-peer-dependencies=false
================================================
FILE: .nvmrc
================================================
lts/*
================================================
FILE: .prettierrc
================================================
{
"singleQuote": true,
"jsxSingleQuote": true,
"semi": true,
"tabWidth": 2,
"bracketSpacing": true,
"arrowParens": "avoid",
"trailingComma": "none"
}
================================================
FILE: .simple-git-hooks.json
================================================
{
"commit-msg": "pnpm commitlint --edit \"$1\"",
"pre-commit": "pnpm nano-staged",
"pre-push": "pnpm test"
}
================================================
FILE: .simple-release.json
================================================
{
"project": "@simple-release/pnpm#PnpmProject"
}
================================================
FILE: .size-limit.json
================================================
[
{
"path": "dist/index.cjs",
"limit": "36.76 kB",
"webpack": false,
"running": false
},
{
"path": "dist/index.cjs",
"limit": "7.45 kB",
"import": "{ BarChart }"
},
{
"path": "dist/index.js",
"limit": "36.48 kB",
"webpack": false,
"running": false
},
{
"path": "dist/index.js",
"limit": "7.4 kB",
"import": "{ BarChart }"
},
{
"path": "dist/index.css",
"limit": "1.3 kB",
"webpack": false,
"running": false
}
]
================================================
FILE: .storybook/main.js
================================================
const path = require('path');
module.exports = {
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-docs',
'@storybook/addon-controls',
'@storybook/addon-actions',
'@storybook/addon-viewport'
],
webpackFinal: async config => {
config.module.rules[0].use = [require.resolve('swc-loader')];
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'].map(
require.resolve
)
});
config.resolve.alias['chartist-dev/styles$'] = path.resolve(
__dirname,
'..',
'src',
'styles',
'index.scss'
);
config.resolve.alias['chartist-dev$'] = path.resolve(
__dirname,
'..',
'src'
);
return config;
}
};
================================================
FILE: .storybook/manager.js
================================================
import { addons } from '@storybook/addons';
import { theme } from './theme';
addons.setConfig({
theme,
panelPosition: 'right'
});
================================================
FILE: .storybook/package.json
================================================
{
"type": "commonjs"
}
================================================
FILE: .storybook/preview.js
================================================
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
import { configureActions } from '@storybook/addon-actions';
import faker from 'faker';
const SEED_VALUE = 584;
if (process.env.STORYBOOK_STORYSHOTS) {
// Make faker values reproducible.
faker.seed(SEED_VALUE);
}
configureActions({
depth: 5
});
export const parameters = {
viewport: {
viewports: INITIAL_VIEWPORTS
}
};
================================================
FILE: .storybook/theme.js
================================================
import { create } from '@storybook/theming';
export const theme = create({
base: 'light',
brandTitle: 'chartist',
brandUrl: 'https://github.com/chartist-js/chartist'
});
================================================
FILE: .tool-versions
================================================
pnpm 7.33.7
nodejs 18.18.0
================================================
FILE: CHANGELOG.md
================================================
# Changelog
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
## [1.5.0](https://github.com/chartist-js/chartist/compare/v1.4.0...v1.5.0) (2025-09-30)
### Features
* support for viewport in SVG only providing width and height ([#1403](https://github.com/chartist-js/chartist/issues/1403)) ([752f0a7](https://github.com/chartist-js/chartist/commit/752f0a780cbff77e18ed43c1f1f9b9b4c63507b6))
## [1.4.0](https://github.com/chartist-js/chartist/compare/v1.3.1...v1.4.0) (2025-06-27)
### Features
* add option to prevent overlapping labels ([#1428](https://github.com/chartist-js/chartist/issues/1428)) ([552bfca](https://github.com/chartist-js/chartist/commit/552bfca452c97a2733bbf813832cefb6dd10fddc))
### [1.3.1](https://github.com/chartist-js/chartist/compare/v1.3.0...v1.3.1) (2025-04-07)
### Bug Fixes
* add an error message when chart container is not found ([#1392](https://github.com/chartist-js/chartist/issues/1392)) ([6ee19be](https://github.com/chartist-js/chartist/commit/6ee19be3a1936a3c1761aa2f3651683a02495543))
* prototype pollution vulnerability in extend (CVE-2024-45435) ([#1433](https://github.com/chartist-js/chartist/issues/1433)) ([5a24b93](https://github.com/chartist-js/chartist/commit/5a24b933d2ab4a97c30a24e9fa1da21c9c8083f1)), closes [#1427](https://github.com/chartist-js/chartist/issues/1427)
* use clientWidth/clientHeight instead of getBoundingClientRect ([#1395](https://github.com/chartist-js/chartist/issues/1395)) ([1067900](https://github.com/chartist-js/chartist/commit/10679003a8cec24f9c1f559bdd0c241ec02319a4))
## [1.3.0](https://github.com/chartist-js/chartist/compare/v1.2.1...v1.3.0) (2022-11-03)
### Features
* accumulate-relative stacked bar chart stack mode ([#1375](https://github.com/chartist-js/chartist/issues/1375)) ([ce13067](https://github.com/chartist-js/chartist/commit/ce13067acec9cee050af979d323dae5e728292c4)), closes [#1167](https://github.com/chartist-js/chartist/issues/1167)
### Bug Fixes
* add dist exports ([#1374](https://github.com/chartist-js/chartist/issues/1374)) ([1438bad](https://github.com/chartist-js/chartist/commit/1438bad5b8754fe0744c4c1c8540c08a4c4e6862)), closes [#1368](https://github.com/chartist-js/chartist/issues/1368)
* add missing default for text-line-height ([#1373](https://github.com/chartist-js/chartist/issues/1373)) ([f94e559](https://github.com/chartist-js/chartist/commit/f94e559c2414d17002ee52421b860d91b6eae0af))
### [1.2.1](https://github.com/chartist-js/chartist/compare/v1.2.0...v1.2.1) (2022-10-05)
### Bug Fixes
* data normalization with alignment ([#1365](https://github.com/chartist-js/chartist/issues/1365)) ([fe11d2f](https://github.com/chartist-js/chartist/commit/fe11d2f6d9e55455286bc34d3eed93b587f1313c)), closes [#1235](https://github.com/chartist-js/chartist/issues/1235)
* reverse data correctly [#1250](https://github.com/chartist-js/chartist/issues/1250) ([#1364](https://github.com/chartist-js/chartist/issues/1364)) ([0223b1f](https://github.com/chartist-js/chartist/commit/0223b1ff2c69a919e3d776b58fb9b5cc96654987))
## [1.2.0](https://github.com/chartist-js/chartist/compare/v1.1.3...v1.2.0) (2022-10-03)
### Features
* dist scss styles sources ([#1362](https://github.com/chartist-js/chartist/issues/1362)) ([d0efcb0](https://github.com/chartist-js/chartist/commit/d0efcb00aa45e1d4611a16472da758ead8148f7b))
* remove legacy styles fallbacks ([#1363](https://github.com/chartist-js/chartist/issues/1363)) ([831673f](https://github.com/chartist-js/chartist/commit/831673f9dff080d1c762db2bc5da397eb0b55ab9))
### Bug Fixes
* SvgPath.parse fails on negative values ([#1360](https://github.com/chartist-js/chartist/issues/1360)) ([cf6831d](https://github.com/chartist-js/chartist/commit/cf6831d2f7e08dddb497d6b7ce5354e0976779ab))
### [1.1.3](https://github.com/chartist-js/chartist/compare/v1.1.2...v1.1.3) (2022-09-23)
### Bug Fixes
* B and I series have the same color value ([#1356](https://github.com/chartist-js/chartist/issues/1356)) ([6f5ad92](https://github.com/chartist-js/chartist/commit/6f5ad92795755b1e50775cf7b837d20700f3e334))
* label position fix ([#1357](https://github.com/chartist-js/chartist/issues/1357)) ([fbc13e2](https://github.com/chartist-js/chartist/commit/fbc13e22c334a46e9097f7115c1616fc0cc1077d)), closes [#1266](https://github.com/chartist-js/chartist/issues/1266)
### [1.1.2](https://github.com/chartist-js/chartist/compare/v1.1.1...v1.1.2) (2022-08-14)
### Bug Fixes
* add id field to AnimationDefinition interface ([#1351](https://github.com/chartist-js/chartist/issues/1351)) ([4012c43](https://github.com/chartist-js/chartist/commit/4012c43942e2dd243a4e5983f25bf4c22ea42d91))
### [1.1.1](https://github.com/chartist-js/chartist/compare/v1.1.0...v1.1.1) (2022-08-13)
### Bug Fixes
* add styles to side effects ([#1350](https://github.com/chartist-js/chartist/issues/1350)) ([053bf97](https://github.com/chartist-js/chartist/commit/053bf978d825c6285da93af3558b8c0667676212))
## [1.1.0](https://github.com/chartist-js/chartist/compare/v1.0.0...v1.1.0) (2022-08-13)
### Features
* add ResponsiveOptions type helper, add generic type to Svg#getNode method ([#1347](https://github.com/chartist-js/chartist/issues/1347)) ([7dd3ba2](https://github.com/chartist-js/chartist/commit/7dd3ba2992751976bfdff9603021afa8fad140d8))
### Bug Fixes
* add Date type to members of Multi type ([#1348](https://github.com/chartist-js/chartist/issues/1348)) ([9bd8679](https://github.com/chartist-js/chartist/commit/9bd867958dd457b26cb697cf6b4d101944443755))
## [1.0.0](https://github.com/chartist-js/chartist/compare/v0.11.4...v1.0.0) (2022-08-08)
### ⚠ BREAKING CHANGES
* [new exports names](https://github.com/chartist-js/chartist#esm)
* methods in EventEmitter were renamed: `addEventHandler` -> `on`, `removeEventHandler` -> `off` ([73e1c44](https://github.com/chartist-js/chartist/commit/73e1c44dc1abab4938dc623a3dc22caad92af6a8))
### Features
* [TypeScript support](https://github.com/chartist-js/chartist#typescript) ([ee4106e](https://github.com/chartist-js/chartist/commit/ee4106e04f3c081805dd79675340378f895c8290))
* [ESM support](https://github.com/chartist-js/chartist#esm)
v0.11.0 - 11 Apr 2017
- Added CSP compatibility by using CSSOM instead of style attributes (Francisco Silva)
- Added feature to render pie / donut chart as solid shape, allowing outlines (Sergey Kovalyov, Chris Carson)
- Fixed XMLNS for foreignObjet content (Alfredo Matos)
v0.10.0 - 23 Oct 2016
---------------------
- Added dominant-baseline styles for pie and donut charts (Gion Kunz)
- Added public getNode on SVG api (Gion Kunz)
- Added support for bar charts to have auto narrowing on AutoScaleAxis by overriding referenceValue (Jonathan Dumaine)
- Added amdModuleId for better integration into webpack (Chris)
- Added grid background to line and bar chart (hansmaad)
- Added new LTS node version and included NPM run scripts (Gion Kunz)
- Added correct meta data emission in events (Gion Kunz)
- Fixed rounding issues where raw value was added instead of rounded (Gion Kunz)
- Fixed step axis issue with axis stretch and series count 0 (Gion Kunz)
- Fixed label position of single series pie / donut charts to be centered (Gion Kunz)
- Fixed order or drawing pie and donut slices (Gion Kunz)
- Fixed calculations of stepLength to only stretch ticksLength if > 1 (Alexander van Eck)
- Fixed better handling of axisOptions.position and fallback to 'end' position (Alexander van Eck)
- Fixed handling of holes in interpolation for multi-value series (James Watmuff)
- Fixed function StepAxis() returning NaN (Joao Milton)
- Fixed NaN issues in SVG when rendering Pie chart with only 0s (Alexander van Eck)
- Fixed infinite loop in getBounds with a more robust increment (hansmaad)
- Fixed performance of Chartist.extend (cheese83)
- Fixed license reference issues in package.json (Jacob Quant)
- Cleanup of data normalization changes and allows Date objects and booleans as values (Gion Kunz)
- Cleanup refactoring for data management and normalization (Gion Kunz)
v0.9.8 - 22 Jun 2016
--------------------
- Added monotone cubic interpolation which is now the default interpolation for line charts (James Watmuff)
- Update zoom plugin to 0.2.1 (hansmaad)
- Bugfix: Prevent infinite loop in getBounds if bounds.valueRange is very small, fixes #643 (hansmaad)
- Bugfix: Correct update events during media changes (Rory Hunter)
- Bugfix: prevent negative value for foreignObject width attribute (Jose Ignacio)
- Fixed example line chart in getting started documentation (Robin Edbom)
- Updated development pipeline dependencies (Gion Kunz)
- Updated chartist tooltip plugin and example styles (Gion Kunz)
- Fixed WTFPL License issue (Gion Kunz)
v0.9.7 - 23 Feb 2016
--------------------
- Fixed bug with label and grid rendering on axis, fixes #621
v0.9.6 - 22 Feb 2016
--------------------
- Added dual licensing WTFPL and MIT, built new version (Gion Kunz)
- Adding unminified CSS to dist output, fixes #506 (Gion Kunz)
- Refactored namespaced attribute handling, fixes #584 (Gion Kunz)
- Allow charts to be created without data and labels, fixes #598, fixes #588, fixes #537, fixes #425 (Gion Kunz> <Carlos Morales)
- Removed onlyInteger setting from default bar chart settings, fixes #423 (Gion Kunz)
- Removed serialization of values on line chart areas, fixes #424 (Gion Kunz)
- Removed workaround and fallback for SVG element width and height calculations, fixes #592 (Gion Kunz)
- Render 0 in ct:value attribute for line graphs (Paul Salaets)
- Allow empty pie chart values to be ignored (Stephen)
- Fix #527 Pie render issue with small angles. (hansmaad)
- Small fix for stacked bars with 'holes' in the data (medzes)
v0.9.5 - 14 Nov 2015
--------------------
- Added 'fillHoles' option for line graphs, which continues the line smoothly through data holes (Thanks to Joshua Warner !)
- Added option to use relative donut width values (Thanks to hansmaad !)
- Added stackMode for bar charts to create overlapping charts or bipolar stacked charts (Thanks to Douglas Mak !)
- Fixed issue with unordered ticks in fixed scale axis, fixes #411 (Thanks Carlos !)
- Fixed left navigation in examples was not using valid anchors, fixes #514 (Thanks Carlos !)
- Internal refactoring and cleanup (Thanks to hansmaad !)
v0.9.4 - 06 Aug 2015
--------------------
- Added axes to all events where they are available in context to provide better API convenience when developing plugins
- Consider additional parameters of SVG elem when called with DOM node
v0.9.3 - 05 Aug 2015
--------------------
- Added better check for undefined values in bar chart, fixes #400
- Fixed issue with SVG feature check within Svg module (Thanks to Markus Gruber !)
v0.9.2 - 02 Aug 2015
--------------------
- Enabled bar charts to use dynamic axes fixes #363, fixes #355
- Added axis title plugin to plugins page (Thanks to @alexstanbury !)
- Added a label group for Pie charts to prevent occlusion by slices (Thanks to Anthony Jimenez!)
- Added better handling for multi values when writing custom attributes, fixes #379
v0.9.1 - 24 Jun 2015
--------------------
- Fixed bug with areaBase narrowing process in area charts, fixes #364
- Fixed bug on bar chart where wrong offset was used (axis offset), fixes #347 (Thanks to @amsardesai !)
- Fixed bug with namespace attributes that caused duplication of SVG element on updates in old browsers (Thanks to @radist2s !)
v0.9.0 - 10 Jun 2015
--------------------
- Major refactoring of axis and projection code, added possibility to configure axes when creating a chart
- Added areaBase to series options override in line chart, fixes #342
- Throwing up in infinite loop for edge cases and during development
- Documentation: Added documentation for axis configuration and getting started guide for custom axes
v0.8.3 - 07 Jun 2015
--------------------
- Greatly reduced CSS selector complexity and split slice into slice-pie and slice-donut
- Added more robust detach mechanism that takes async initialization into account
- Added better handling for area drawing with segmented paths, fixes #340
- Documentation: Added getting started guide for styling charts
v0.8.2 - 02 Jun 2015
--------------------
- Fixed broken release 0.8.1
v0.8.1 - 02 Jun 2015 (BROKEN!)
------------------------------
- Added new option labelPosition for Pie charts to have better control over label placement, fixes #315
- Added default styles for alignment-baseline
- Added better support for undefined values in bar charts
- Refactored getHighLow to use recursion in order to enable more dynamic array structures and better edge case management
- Fixed issue with Chartist.rho that caused endless loop when called with 1, fixes #318
v0.8.0 - 10 May 2015
--------------------
- Added new option to bar charts to allow a series distribution and use a simple one dimensional array for data (#209)
- Added option for label placement and refactored label positioning code (#302)
- Added option to only use integer numbers in linear scale axis (#77)
- Added possibility to add series configuration on line chart to override specific options on series level (#289, #168)
- Added functionality to handle holes in line charts (#294)
- Added step interpolation for line charts
- Added default styles for bar and horizontal bar labels that make more sense (#303)
- Added series data and meta information to events (#293)
- Changed line chart behavior to draw points from interpolated values (#295)
- Removed restriction to SVGElements so Chartist.Svg can be used for HTML DOM elements (#261)
- Refactored and simplified axis creation, also includes updated CSS label handling
- Refactored getDataArray for simplification and fixed type conversion issue with data arrays for pie charts
- Centralized high/low calculations in getHighLow() method and added support for empty charts. Thanks @scthi !
- Fixed bug in pie chart where meta was only added when series name was specified
- Fixed bug where special condition to check single value should also include object value notation (#265)
- Fixed bug with Chartist.extend when null property is extended
- Fixed bug with Firefox dying with a DOM exception when calling getBBox() on an invisible node. Thanks @scthi !
- Switched from object literal accessor definition to regular function (#278)
v0.7.4 - 19 Apr 2015
--------------------
- Enhanced documentation site (Accessibility plugin, live example eval, fixed path to Sass settings, better HTML example of how to include Chartist, example how to include multiple charts on one page)
- Added Arc to Chartist.Svg.Path
- Refactored Chartist.Pie to make use of Svg.Path and expose path in events
- Closing path of Pie if not a donut for correct strokes
- Exposing axis objects in created event
- Changed grid event to use axis object instead of string
v0.7.3 - 27 Feb 2015
--------------------
- Fixed bugs in the chart.update method
- Fixed rounding precision issues in order of magnitude calculation
- Fixed bug in Chartist.extend which caused merge problems from object properties into non-objects
- Added possibility to use chartPadding with a padding object that contains top, right, bottom and left properties
v0.7.2 - 12 Feb 2015
--------------------
- Added new line smoothing / interpolation module for configurable line smoothing
- Added simple line smoothing. Thanks @danieldiekmeier !
- Removed some unused internal code
v0.7.1 - 02 Feb 2015
--------------------
- Bug fix where some files where not included in dist version of Chartist which made v0.7.0 unusable.
v0.7.0 - 01 Feb 2015
--------------------
- This version introduces a new option in the bar charts to draw them horizontally
- Underlying changes for axis model that allows flexible value projection and removes code duplication
- Added SVG Path API for manipulating SVG paths. This can be used in animations or to transform the output by Chartist further.
- The fullWidth and centerBars options were removed from the bar chart
- Updating chart after options update enables the use of 'print' media query in responsive options to have a quick redraw before printing. This only works in Chrome 40 so far
- Fixed issues with 0 values in series object data notation
v0.6.1 - 23 Jan 2015
--------------------
- Fixed bug that prevented data events to be captured
- Fixed bug with update function called in the same call stack as chart constructor
v0.6.0 - 17 Jan 2015
--------------------
- Added 14 default colors for colored series
- Added data event that allows you to transform the data before it gets rendered in Chartist. This is also useful for plugin authors that would like to create plugins which modify data.
- Possibility to specify meta data in the data object passed to Chartist that will be written to custom attributes into the DOM.
- Possibility to specify options when calling chart.update in order to override the current options with new ones
- Fixed some missing entries in the bower ignore section to exclude the documentation site as well as the grunt tasks
- Fixed issue when Chartist is initialized in a container that already contains SVG
v0.5.0 - 14 Dec 2014
--------------------
- Added new option for line and bar chart to use full width of the chart area by skipping the last grid line
- Added new option for bar chart to create stacked bar charts
- All chart update functions now accepts an optional data parameter that allows to update an existing chart with new data
- Fix for an error when charts get re-constructed on the same element and in the same call stack
v0.4.4 - 11 Dec 2014
--------------------
- Fixed NS_ERROR_FAILURE error in Firefox and added graceful handling of unsupported SMIL animations (i.e. in foreignObjects)
v0.4.3 - 27 Nov 2014
--------------------
- Updated plugin architecture for convenience reasons and better support for modularization
v0.4.2 - 27 Nov 2014
--------------------
- Included first version of Chartist.js Plugin mechanism
- Major refactoring of development stack (thanks @Autarc !)
- Removed unused functions in Chartist.Core
v0.4.1 - 21 Nov 2014
--------------------
- Added more functionality to Chartist.Svg: select child elements, parent, root as well as a Svg list wrapper with delegation functions
- Fixed bug in strip unit
- Added classes to the label and grid gorups
- Added this as return value so calls to chart can be chained up easily
v0.4.0 - 17 Nov 2014
--------------------
- Added new animation API for SMIL animations
- Added possibility to add event handlers with asterisk that will be triggerd on all events including the event name in the cb function
- Added possibility to pass DOM node to SVG constructor so you can wrap existing SVG nodes into a Chartist.Svg element
- Fixed svg recycling on re-creation
- Fixed resize listener detach that wasn't working properly
- Refactored Chartist.Svg to use Chartist.Class
- Including event when line and area is drawn
- Changed default scaleMinSpace to 20 to be more mobile friendly
- Fixed bug with line area base
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to Chartist
- [Issues and Bugs](#issue)
- [Submission Guidelines](#submit)
## <a name="issue"></a> Found an Issue?
If you find a bug in the source code or a mistake in the documentation, you can help us by
submitting an issue to our [GitHub Repository][github]. Even better you can submit a Pull Request
with a fix.
## Pre-requisites
You will need the following to run a local development enviroment.
- Node.js & npm
- pnpm (`npm install -g pnpm`)
- Text editor of your choice
## How to Run a Local Distribution
1. `cd` into your local copy of the repository.
2. Run `pnpm i` to install dependencies located in `package.json`.
5. Run `pnpm start:storybook` to start Storybook, or run `pnpm jest --watch` to run tests in watch mode. Congrats, you should now be able to see your local copy of the Chartist testbed.
## <a name="submit"></a> Submission Guidelines
If you are creating a Pull Request, fork the repository and make any changes on the `develop` branch.
================================================
FILE: LICENSE-MIT
================================================
Copyright (c) 2013 Gion Kunz <gion.kunz@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: LICENSE-WTFPL
================================================
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
================================================
FILE: README.md
================================================
# Big welcome by the Chartist Guy
[![NPM version][npm]][npm-url]
[![Downloads][downloads]][downloads-url]
[![Build status][build]][build-url]
[![Coverage status][coverage]][coverage-url]
[![Bundle size][size]][size-url]
[![Join the chat at https://gitter.im/gionkunz/chartist-js][chat]][chat-url]
[npm]: https://img.shields.io/npm/v/chartist.svg
[npm-url]: https://www.npmjs.com/package/chartist
[downloads]: https://img.shields.io/npm/dm/chartist.svg
[downloads-url]: https://www.npmjs.com/package/chartist
[build]: https://img.shields.io/github/actions/workflow/status/chartist-js/chartist/ci.yml
[build-url]: https://github.com/chartist-js/chartist/actions
[coverage]: https://img.shields.io/codecov/c/github/chartist-js/chartist.svg
[coverage-url]: https://app.codecov.io/gh/chartist-js/chartist
[size]: https://img.shields.io/bundlephobia/minzip/chartist
[size-url]: https://bundlephobia.com/package/chartist
[chat]: https://badges.gitter.im/gionkunz/chartist-js.svg
[chat-url]: https://gitter.im/gionkunz/chartist-js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge
<p align="center">
<img width="400" alt="The Chartist Guy" src="https://raw.github.com/chartist-js/chartist/main/website/static/img/chartist-guy.gif">
</p>
Chartist is a simple responsive charting library built with SVG. There are hundreds of nice charting libraries already
out there, but they are either:
- use the wrong technologies for illustration (canvas)
- weighs hundreds of kilobytes
- are not flexible enough while keeping the configuration simple
- are not friendly to designers
- more annoying things
That's why we started Chartist and our goal is to solve all of the above issues.
<hr />
<a href="#quickstart">Quickstart</a>
<span> • </span>
<a href="#what-is-it-made-for">What is it made for?</a>
<span> • </span>
<a href="https://chartist.dev/docs/whats-new-in-v1">What's new in v1?</a>
<span> • </span>
<a href="https://chartist.dev/">Docs</a>
<span> • </span>
<a href="https://chartist.dev/examples">Examples</a>
<span> • </span>
<a href="#contribution">Contribution</a>
<hr />
## Quickstart
Install this library using your favorite package manager:
```sh
pnpm add chartist
# or
yarn add chartist
# or
npm i chartist
```
Then, just import chart you want and use it:
```js
import { BarChart } from 'chartist';
new BarChart('#chart', {
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
series: [
[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
]
}, {
high: 10,
low: -10,
axisX: {
labelInterpolationFnc: (value, index) => (index % 2 === 0 ? value : null)
}
});
```
<br />
Need an API to fetch data? Consider [Cube](https://cube.dev/?ref=eco-chartist), an open-source API for data apps.
<br />
[](https://cube.dev/?ref=eco-chartist)
## What is it made for?
Chartist's goal is to provide a simple, lightweight and unintrusive library to responsively craft charts on your website.
It's important to understand that one of the main intentions of Chartist is to rely on standards rather than providing
it's own solution to a problem which is already solved by those standards. We need to leverage the power of browsers
today and say good bye to the idea of solving all problems ourselves.
Chartist works with inline-SVG and therefore leverages the power of the DOM to provide parts of its functionality. This
also means that Chartist does not provide it's own event handling, labels, behaviors or anything else that can just be
done with plain HTML, JavaScript and CSS. The single and only responsibility of Chartist is to help you drawing "Simple
responsive Charts" using inline-SVG in the DOM, CSS to style and JavaScript to provide an API for configuring your charts.
## Plugins
Coming soon.
<details>
<summary>For v0.11</summary>
Some features aren't right for the core product
but there is a great set of plugins available
which add features like:
* [Axis labels](http://gionkunz.github.io/chartist-js/plugins.html#axis-title-plugin)
* [Tooltips at data points](https://gionkunz.github.io/chartist-js/plugins.html#tooltip-plugin)
* [Coloring above/below a threshold](https://gionkunz.github.io/chartist-js/plugins.html#threshold-plugin)
and more.
See all the plugins [here](https://gionkunz.github.io/chartist-js/plugins.html).
</details>
## Contribution
We are looking for people who share the idea of having a simple, flexible charting library that is responsive and uses
modern and future-proof technologies. The goal of this project is to create a responsive charting library where developers
have their joy in using it and designers love it because of the designing flexibility they have. Please contribute
to the project if you like the idea and the concept and help us to bring nice looking responsive open-source charts
to the masses.
Contribute if you like the Chartist Guy!
================================================
FILE: jest.config.json
================================================
{
"testEnvironment": "jsdom",
"testRegex": "(test|src)/.*\\.spec\\.(jsx?|tsx?)$",
"setupFilesAfterEnv": ["<rootDir>/test/setup.js"],
"transform": {
"^.+\\.(t|j)sx?$": ["@swc/jest", {
"env": {
"targets": {
"node": 14
}
}
}]
},
"moduleNameMapper": {
"^chartist-dev$": "<rootDir>/src",
"^chartist-dev/styles$": "<rootDir>/test/mock/cssModule.js"
},
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!**/node_modules/**",
"!**/*.stories.*"
],
"coverageReporters": [
"lcovonly",
"text"
]
}
================================================
FILE: package.json
================================================
{
"name": "chartist",
"type": "module",
"version": "1.5.0",
"description": "Simple, responsive charts",
"author": "Gion Kunz",
"homepage": "https://chartist.dev",
"license": "MIT OR WTFPL",
"licenses": [
{
"type": "WTFPL",
"url": "https://github.com/chartist-js/chartist/blob/main/LICENSE-WTFPL"
},
{
"type": "MIT",
"url": "https://github.com/chartist-js/chartist/blob/main/LICENSE-MIT"
}
],
"repository": {
"type": "git",
"url": "https://github.com/chartist-js/chartist.git"
},
"bugs": {
"url": "https://github.com/chartist-js/chartist/issues"
},
"keywords": [
"chartist",
"responsive charts",
"charts",
"charting"
],
"engines": {
"node": ">=14"
},
"sideEffects": [
"*.css",
"*.scss"
],
"types": "./dist/index.d.ts",
"style": "./dist/index.css",
"unpkg": "./dist/index.umd.js",
"jsdelivr": "./dist/index.umd.js",
"main": "./src/index.ts",
"publishConfig": {
"main": "./dist/index.cjs",
"module": "./dist/index.js",
"exports": {
".": {
"require": "./dist/index.cjs",
"import": "./dist/index.js"
},
"./dist/*": "./dist/*"
},
"directory": "package"
},
"files": [
"dist",
"LICENSE-WTFPL",
"LICENSE-MIT"
],
"scripts": {
"clear:package": "del ./package",
"clear": "del ./package ./dist ./coverage",
"prepublishOnly": "pnpm test && pnpm build && pnpm clear:package && clean-publish",
"postpublish": "pnpm clear:package",
"emitDeclarations": "tsc --project ./tsconfig.build.json --emitDeclarationOnly",
"build:styles": "./scripts/styles.cjs ./src/styles/index.scss",
"build": "rollup -c & pnpm build:styles & pnpm emitDeclarations",
"start:storybook": "start-storybook -p 6006 --ci",
"build:storybook": "del ./storybook-static; NODE_ENV=production build-storybook",
"jest": "jest -c jest.config.json",
"test:size": "size-limit",
"test:unit": "jest -c jest.config.json ./src",
"test:storyshots": "jest -c jest.config.json ./test/storyshots.spec.js",
"test": "pnpm lint && pnpm test:unit",
"lint": "eslint './*.{js,ts,cjs}' 'test/**/*.{js,ts}' 'src/**/*.{js,ts}' '.storybook/**/*.{js,ts}' 'scripts/**/*.{js,ts,cjs}' 'sandboxes/**/*.{js,ts}'",
"format": "prettier --write './*.{js,ts}' 'test/**/*.{js,ts}' 'src/**/*.{js,ts}' '.storybook/**/*.{js,ts}' 'scripts/**/*.{cjs,js,ts}' 'sandboxes/**/*.{js,ts}'",
"commit": "cz",
"updateGitHooks": "simple-git-hooks"
},
"devDependencies": {
"@babel/core": "^7.17.9",
"@babel/eslint-parser": "^7.17.0",
"@commitlint/cli": "^17.0.0",
"@commitlint/config-conventional": "^17.0.0",
"@commitlint/cz-commitlint": "^17.0.0",
"@rollup/plugin-node-resolve": "^13.2.0",
"@size-limit/preset-big-lib": "^7.0.8",
"@storybook/addon-actions": "^6.4.22",
"@storybook/addon-controls": "^6.4.22",
"@storybook/addon-docs": "^6.4.22",
"@storybook/addon-storyshots": "^6.4.22",
"@storybook/addon-storyshots-puppeteer": "^6.4.22",
"@storybook/addon-viewport": "^6.4.22",
"@storybook/html": "^6.4.22",
"@swc/core": "^1.2.165",
"@swc/helpers": "^0.5.0",
"@swc/jest": "^0.2.20",
"@testing-library/jest-dom": "^5.16.4",
"@types/faker": "^5.5.8",
"@types/jest": "^27.5.1",
"@types/node": "^18.0.0",
"@types/testing-library__jest-dom": "^5.14.5",
"@typescript-eslint/eslint-plugin": "^5.25.0",
"@typescript-eslint/parser": "^5.25.0",
"browserslist": "^4.20.2",
"clean-publish": "^4.0.1",
"commitizen": "^4.2.4",
"cssnano": "^4.1.11",
"del": "^6.0.0",
"del-cli": "^5.0.0",
"eslint": "^8.15.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-jest": "^27.0.0",
"eslint-plugin-jest-dom": "^4.0.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-testing-library": "^5.5.0",
"faker": "^5.5.3",
"http-server": "^14.1.0",
"jest": "^27.5.1",
"jest-image-snapshot": "^4.5.1",
"nano-staged": "^0.8.0",
"postcss": "^8.0.0",
"postcss-loader": "^4.3.0",
"postcss-preset-env": "^6.7.1",
"prettier": "^2.6.2",
"puppeteer": "^14.0.0",
"rollup": "^2.70.1",
"rollup-plugin-swc": "^0.2.1",
"rollup-plugin-terser": "^7.0.2",
"sass": "^1.50.1",
"sass-loader": "^10.0.0",
"simple-git-hooks": "^2.7.0",
"size-limit": "^7.0.8",
"swc-loader": "^0.2.3",
"typescript": "^4.6.4"
}
}
================================================
FILE: pnpm-workspace.yaml
================================================
packages:
- 'website'
================================================
FILE: postcss.config.cjs
================================================
const isProd = process.env.NODE_ENV !== 'development';
module.exports = {
plugins: [
require('postcss-preset-env'),
isProd &&
require('cssnano')({
preset: 'default'
})
].filter(Boolean)
};
================================================
FILE: rollup.config.js
================================================
import swc from 'rollup-plugin-swc';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';
import pkg from './package.json';
const extensions = ['.js', '.ts', '.tsx'];
const external = _ => /node_modules/.test(_) && !/@swc\/helpers/.test(_);
const plugins = (targets, minify) =>
[
nodeResolve({
extensions
}),
swc({
jsc: {
parser: {
syntax: 'typescript'
},
externalHelpers: true
},
env: {
targets
},
module: {
type: 'es6'
},
sourceMaps: true
}),
minify && terser()
].filter(Boolean);
export default [
{
input: pkg.main,
plugins: plugins('defaults, not ie 11, not ie_mob 11'),
external,
output: {
file: pkg.publishConfig.main,
format: 'cjs',
exports: 'named',
sourcemap: true
}
},
{
input: pkg.main,
plugins: plugins('defaults, not ie 11, not ie_mob 11', true),
external: () => false,
output: {
file: pkg.unpkg,
format: 'umd',
name: 'Chartist',
exports: 'named',
sourcemap: true
}
},
{
input: pkg.main,
plugins: plugins('defaults and supports es6-module'),
external,
output: {
file: pkg.publishConfig.module,
format: 'es',
sourcemap: true
}
}
];
================================================
FILE: sandboxes/bar/bi-polar-interpolated/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/bar/bi-polar-interpolated/index.ts
================================================
import 'chartist/dist/index.css';
import { BarChart, BarChartOptions } from 'chartist';
const data = {
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
series: [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]]
};
const options: BarChartOptions = {
high: 10,
low: -10,
axisX: {
labelInterpolationFnc(value, index) {
return index % 2 === 0 ? value : null;
}
}
};
new BarChart('#chart', data, options);
================================================
FILE: sandboxes/bar/bi-polar-interpolated/package.json
================================================
{
"name": "bar-bi-polar-interpolated",
"description": "Bi-polar bar chart",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/bar/bi-polar-interpolated/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/bar/distributed-series/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/bar/distributed-series/index.ts
================================================
import 'chartist/dist/index.css';
import { BarChart } from 'chartist';
new BarChart(
'#chart',
{
labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
series: [20, 60, 120, 200, 180, 20, 10]
},
{
distributeSeries: true
}
);
================================================
FILE: sandboxes/bar/distributed-series/package.json
================================================
{
"name": "bar-distributed-series",
"description": "Distributed series",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/bar/distributed-series/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/bar/extreme-responsive/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/bar/extreme-responsive/index.ts
================================================
import 'chartist/dist/index.css';
import { BarChart, noop } from 'chartist';
new BarChart(
'#chart',
{
labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
series: [
[5, 4, 3, 7],
[3, 2, 9, 5],
[1, 5, 8, 4],
[2, 3, 4, 6],
[4, 1, 2, 1]
]
},
{
// Default mobile configuration
stackBars: true,
axisX: {
labelInterpolationFnc: value =>
String(value)
.split(/\s+/)
.map(word => word[0])
.join('')
},
axisY: {
offset: 20
}
},
[
// Options override for media > 400px
[
'screen and (min-width: 400px)',
{
reverseData: true,
horizontalBars: true,
axisX: {
labelInterpolationFnc: noop
},
axisY: {
offset: 60
}
}
],
// Options override for media > 800px
[
'screen and (min-width: 800px)',
{
stackBars: false,
seriesBarDistance: 10
}
],
// Options override for media > 1000px
[
'screen and (min-width: 1000px)',
{
reverseData: false,
horizontalBars: false,
seriesBarDistance: 15
}
]
]
);
================================================
FILE: sandboxes/bar/extreme-responsive/package.json
================================================
{
"name": "bar-extreme-responsive",
"description": "Extreme responsive configuration",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/bar/extreme-responsive/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/bar/horizontal/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/bar/horizontal/index.ts
================================================
import 'chartist/dist/index.css';
import { BarChart } from 'chartist';
new BarChart(
'#chart',
{
labels: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
series: [
[5, 4, 3, 7, 5, 10, 3],
[3, 2, 9, 5, 4, 6, 4]
]
},
{
seriesBarDistance: 10,
reverseData: true,
horizontalBars: true,
axisY: {
offset: 70
}
}
);
================================================
FILE: sandboxes/bar/horizontal/package.json
================================================
{
"name": "bar-horizontal",
"description": "Horizontal bar chart",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/bar/horizontal/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/bar/label-position/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/bar/label-position/index.ts
================================================
import 'chartist/dist/index.css';
import { BarChart } from 'chartist';
new BarChart(
'#chart',
{
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [
[5, 4, 3, 7, 5, 10, 3],
[3, 2, 9, 5, 4, 6, 4]
]
},
{
axisX: {
// On the x-axis start means top and end means bottom
position: 'start'
},
axisY: {
// On the y-axis start means left and end means right
position: 'end'
}
}
);
================================================
FILE: sandboxes/bar/label-position/package.json
================================================
{
"name": "bar-label-position",
"description": "Label placement",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/bar/label-position/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/bar/multiline/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/bar/multiline/index.ts
================================================
import 'chartist/dist/index.css';
import { BarChart } from 'chartist';
new BarChart(
'#chart',
{
labels: [
'First quarter of the year',
'Second quarter of the year',
'Third quarter of the year',
'Fourth quarter of the year'
],
series: [
[60000, 40000, 80000, 70000],
[40000, 30000, 70000, 65000],
[8000, 3000, 10000, 6000]
]
},
{
seriesBarDistance: 10,
axisX: {
offset: 60
},
axisY: {
offset: 80,
labelInterpolationFnc: value => value + ' CHF',
scaleMinSpace: 15
}
}
);
================================================
FILE: sandboxes/bar/multiline/package.json
================================================
{
"name": "bar-multiline",
"description": "Multi-line labels",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/bar/multiline/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/bar/overlapping-bars/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/bar/overlapping-bars/index.ts
================================================
import 'chartist/dist/index.css';
import { BarChart, BarChartOptions, ResponsiveOptions } from 'chartist';
const data = {
labels: [
'Jan',
'Feb',
'Mar',
'Apr',
'Mai',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
series: [
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
[3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
]
};
const options = {
seriesBarDistance: 15
};
const responsiveOptions: ResponsiveOptions<BarChartOptions> = [
[
'screen and (min-width: 641px) and (max-width: 1024px)',
{
seriesBarDistance: 10,
axisX: {
labelInterpolationFnc: value => value
}
}
],
[
'screen and (max-width: 640px)',
{
seriesBarDistance: 5,
axisX: {
labelInterpolationFnc: value => String(value)[0]
}
}
]
];
new BarChart('#chart', data, options, responsiveOptions);
================================================
FILE: sandboxes/bar/overlapping-bars/package.json
================================================
{
"name": "bar-overlapping-bars",
"description": "Overlapping bars on mobile",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/bar/overlapping-bars/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/bar/stacked/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/bar/stacked/index.ts
================================================
import 'chartist/dist/index.css';
import { BarChart } from 'chartist';
new BarChart(
'#chart',
{
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
series: [
[800000, 1200000, 1400000, 1300000],
[200000, 400000, 500000, 300000],
[100000, 200000, 400000, 600000]
]
},
{
stackBars: true,
axisY: {
labelInterpolationFnc: value => +value / 1000 + 'k'
}
}
).on('draw', data => {
if (data.type === 'bar') {
data.element.attr({
style: 'stroke-width: 30px'
});
}
});
================================================
FILE: sandboxes/bar/stacked/package.json
================================================
{
"name": "bar-stacked",
"description": "Stacked bar chart",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/bar/stacked/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/bar/stacked-accumulate-relative/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/bar/stacked-accumulate-relative/index.ts
================================================
import 'chartist/dist/index.css';
import { BarChart } from 'chartist';
new BarChart(
'#chart',
{
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday'],
series: [
[5, 4, -3, -5],
[5, -4, 3, -5]
]
},
{
stackBars: true,
stackMode: 'accumulate-relative'
}
);
================================================
FILE: sandboxes/bar/stacked-accumulate-relative/package.json
================================================
{
"name": "bar-stacked",
"description": "Stacked bar chart with accumulate-relative stack mode",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/bar/stacked-accumulate-relative/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/bar/with-circle-modify-drawing/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/bar/with-circle-modify-drawing/index.ts
================================================
import 'chartist/dist/index.css';
import { BarChart, Svg, getMultiValue } from 'chartist';
// Create a simple bi-polar bar chart
const chart = new BarChart(
'#chart',
{
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
series: [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]]
},
{
high: 10,
low: -10,
axisX: {
labelInterpolationFnc: (value, index) => (index % 2 === 0 ? value : null)
}
}
);
// Listen for draw events on the bar chart
chart.on('draw', data => {
// If this draw event is of type bar we can use the data to create additional content
if (data.type === 'bar') {
// We use the group element of the current series to append a simple circle with the bar peek coordinates and a circle radius that is depending on the value
data.group.append(
new Svg(
'circle',
{
cx: data.x2,
cy: data.y2,
r: Math.abs(Number(getMultiValue(data.value))) * 2 + 5
},
'ct-slice-pie'
)
);
}
});
================================================
FILE: sandboxes/bar/with-circle-modify-drawing/package.json
================================================
{
"name": "bar-with-circle-modify-drawing",
"description": "Add peak circles using the draw events",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/bar/with-circle-modify-drawing/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/line/area/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/line/area/index.ts
================================================
import 'chartist/dist/index.css';
import { LineChart } from 'chartist';
new LineChart(
'#chart',
{
labels: [1, 2, 3, 4, 5, 6, 7, 8],
series: [[5, 9, 7, 8, 5, 3, 5, 4]]
},
{
low: 0,
showArea: true
}
);
================================================
FILE: sandboxes/line/area/package.json
================================================
{
"name": "line-area",
"description": "Line chart with area",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/line/area/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/line/axis-auto/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/line/axis-auto/index.ts
================================================
import 'chartist/dist/index.css';
import { LineChart, AutoScaleAxis } from 'chartist';
new LineChart(
'#chart',
{
series: [
[
{ x: 1, y: 100 },
{ x: 2, y: 50 },
{ x: 3, y: 25 },
{ x: 5, y: 12.5 },
{ x: 8, y: 6.25 }
]
]
},
{
axisX: {
type: AutoScaleAxis,
onlyInteger: true
}
}
);
================================================
FILE: sandboxes/line/axis-auto/package.json
================================================
{
"name": "line-axis-auto",
"description": "Auto scale axis",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/line/axis-auto/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/line/axis-fixed-and-auto/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/line/axis-fixed-and-auto/index.ts
================================================
import 'chartist/dist/index.css';
import {
LineChart,
AutoScaleAxis,
FixedScaleAxis,
Interpolation
} from 'chartist';
new LineChart(
'#chart',
{
series: [
[
{ x: 1, y: 100 },
{ x: 2, y: 50 },
{ x: 3, y: 25 },
{ x: 5, y: 12.5 },
{ x: 8, y: 6.25 }
]
]
},
{
axisX: {
type: AutoScaleAxis,
onlyInteger: true
},
axisY: {
type: FixedScaleAxis,
ticks: [0, 50, 75, 87.5, 100],
low: 0
},
lineSmooth: Interpolation.step(),
showPoint: false
}
);
================================================
FILE: sandboxes/line/axis-fixed-and-auto/package.json
================================================
{
"name": "line-axis-fixed-and-auto",
"description": "Fixed and auto scale axis",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/line/axis-fixed-and-auto/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/line/bipolar-area/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/line/bipolar-area/index.ts
================================================
import 'chartist/dist/index.css';
import { LineChart } from 'chartist';
new LineChart(
'#chart',
{
labels: [1, 2, 3, 4, 5, 6, 7, 8],
series: [
[1, 2, 3, 1, -2, 0, 1, 0],
[-2, -1, -2, -1, -2.5, -1, -2, -1],
[0, 0, 0, 1, 2, 2.5, 2, 1],
[2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
]
},
{
high: 3,
low: -3,
showArea: true,
showLine: false,
showPoint: false,
fullWidth: true,
axisX: {
showLabel: false,
showGrid: false
}
}
);
================================================
FILE: sandboxes/line/bipolar-area/package.json
================================================
{
"name": "line-bipolar-area",
"description": "Bi-polar Line chart with area only",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/line/bipolar-area/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/line/data-fill-holes/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/line/data-fill-holes/index.ts
================================================
import 'chartist/dist/index.css';
import { LineChart, Interpolation } from 'chartist';
new LineChart(
'#chart',
{
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
series: [
[5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9],
[
10,
15,
null,
12,
null,
10,
12,
15,
null,
null,
12,
null,
14,
null,
null,
null
],
[null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null],
[
{ x: 3, y: 3 },
{ x: 4, y: 3 },
{ x: 5, y: undefined },
{ x: 6, y: 4 },
{ x: 7, y: null },
{ x: 8, y: 4 },
{ x: 9, y: 4 }
]
]
},
{
fullWidth: true,
chartPadding: {
right: 10
},
lineSmooth: Interpolation.cardinal({
fillHoles: true
}),
low: 0
}
);
================================================
FILE: sandboxes/line/data-fill-holes/package.json
================================================
{
"name": "line-data-fill-holes",
"description": "Filled holes in data",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/line/data-fill-holes/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/line/data-holes/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/line/data-holes/index.ts
================================================
import 'chartist/dist/index.css';
import { LineChart } from 'chartist';
new LineChart(
'#chart',
{
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
series: [
[5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9],
[
10,
15,
null,
12,
null,
10,
12,
15,
null,
null,
12,
null,
14,
null,
null,
null
],
[null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null],
[
{ x: 3, y: 3 },
{ x: 4, y: 3 },
{ x: 5, y: undefined },
{ x: 6, y: 4 },
{ x: 7, y: null },
{ x: 8, y: 4 },
{ x: 9, y: 4 }
]
]
},
{
fullWidth: true,
chartPadding: {
right: 10
},
low: 0
}
);
================================================
FILE: sandboxes/line/data-holes/package.json
================================================
{
"name": "line-data-holes",
"description": "Holes in data",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/line/data-holes/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/line/modify-drawing/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/line/modify-drawing/index.ts
================================================
import 'chartist/dist/index.css';
import { LineChart, Svg } from 'chartist';
const chart = new LineChart('#chart', {
labels: [1, 2, 3, 4, 5],
series: [[12, 9, 7, 8, 5]]
});
// Listening for draw events that get emitted by the Chartist chart
chart.on('draw', data => {
// If the draw event was triggered from drawing a point on the line chart
if (data.type === 'point') {
// We are creating a new path SVG element that draws a triangle around the point coordinates
const triangle = new Svg(
'path',
{
d: [
'M',
data.x,
data.y - 15,
'L',
data.x - 15,
data.y + 8,
'L',
data.x + 15,
data.y + 8,
'z'
].join(' '),
style: 'fill-opacity: 1'
},
'ct-area'
);
// With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle
data.element.replace(triangle);
}
});
================================================
FILE: sandboxes/line/modify-drawing/package.json
================================================
{
"name": "line-modify-drawing",
"description": "Using events to replace graphics",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/line/modify-drawing/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/line/only-integer/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/line/only-integer/index.ts
================================================
import 'chartist/dist/index.css';
import { LineChart } from 'chartist';
new LineChart(
'#chart',
{
labels: [1, 2, 3, 4, 5, 6, 7, 8],
series: [
[1, 2, 3, 1, -2, 0, 1, 0],
[-2, -1, -2, -1, -3, -1, -2, -1],
[0, 0, 0, 1, 2, 3, 2, 1],
[3, 2, 1, 0.5, 1, 0, -1, -3]
]
},
{
high: 3,
low: -3,
fullWidth: true,
// As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis
axisY: {
onlyInteger: true,
offset: 20
}
}
);
================================================
FILE: sandboxes/line/only-integer/package.json
================================================
{
"name": "line-only-integer",
"description": "Only whole numbers",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/line/only-integer/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/line/path-animation/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/line/path-animation/index.ts
================================================
import 'chartist/dist/index.css';
import { LineChart, easings } from 'chartist';
const chart = new LineChart(
'#chart',
{
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
series: [
[1, 5, 2, 5, 4, 3],
[2, 3, 4, 8, 1, 2],
[5, 4, 3, 2, 1, 0.5]
]
},
{
low: 0,
showArea: true,
showPoint: false,
fullWidth: true
}
);
chart.on('draw', data => {
if (data.type === 'line' || data.type === 'area') {
data.element.animate({
d: {
begin: 2000 * data.index,
dur: 2000,
from: data.path
.clone()
.scale(1, 0)
.translate(0, data.chartRect.height())
.stringify(),
to: data.path.clone().stringify(),
easing: easings.easeOutQuint
}
});
}
});
================================================
FILE: sandboxes/line/path-animation/package.json
================================================
{
"name": "line-path-animation",
"description": "SVG Path animation",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/line/path-animation/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/line/scatter-random/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/line/scatter-random/index.ts
================================================
import 'chartist/dist/index.css';
import { LineChart, times } from 'chartist';
const data = times(52).reduce<{
labels: number[];
series: number[][];
}>(
(accData, _, index) => {
accData.labels.push(index + 1);
accData.series.forEach(series => {
series.push(Math.random() * 100);
});
return accData;
},
{
labels: [],
series: times(4).map(() => [])
}
);
new LineChart(
'#chart',
data,
{
showLine: false,
axisX: {
labelInterpolationFnc(value, index) {
return index % 13 === 0 ? 'W' + value : null;
}
}
},
[
[
'screen and (min-width: 640px)',
{
axisX: {
labelInterpolationFnc(value, index) {
return index % 4 === 0 ? 'W' + value : null;
}
}
}
]
]
);
================================================
FILE: sandboxes/line/scatter-random/package.json
================================================
{
"name": "line-scatter-random",
"description": "Line scatter diagram with responsive settings",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/line/scatter-random/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/line/series-override/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/line/series-override/index.ts
================================================
import 'chartist/dist/index.css';
import { LineChart, Interpolation } from 'chartist';
new LineChart(
'#chart',
{
labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
// Naming the series with the series object array notation
series: [
{
name: 'series-1',
data: [5, 2, -4, 2, 0, -2, 5, -3]
},
{
name: 'series-2',
data: [4, 3, 5, 3, 1, 3, 6, 4]
},
{
name: 'series-3',
data: [2, 4, 3, 1, 4, 5, 3, 2]
}
]
},
{
fullWidth: true,
// Within the series options you can use the series names
// to specify configuration that will only be used for the
// specific series.
series: {
'series-1': {
lineSmooth: Interpolation.step()
},
'series-2': {
lineSmooth: Interpolation.simple(),
showArea: true
},
'series-3': {
showPoint: false
}
}
},
[
// You can even use responsive configuration overrides to
// customize your series configuration even further!
[
'screen and (max-width: 320px)',
{
series: {
'series-1': {
lineSmooth: Interpolation.none()
},
'series-2': {
lineSmooth: Interpolation.none(),
showArea: false
},
'series-3': {
lineSmooth: Interpolation.none(),
showPoint: true
}
}
}
]
]
);
================================================
FILE: sandboxes/line/series-override/package.json
================================================
{
"name": "line-series-override",
"description": "Series Overrides",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/line/series-override/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/line/simple/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/line/simple/index.ts
================================================
import 'chartist/dist/index.css';
import { LineChart } from 'chartist';
new LineChart(
'#chart',
{
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
},
{
fullWidth: true,
chartPadding: {
right: 40
}
}
);
================================================
FILE: sandboxes/line/simple/package.json
================================================
{
"name": "line-simple",
"description": "Simple line chart",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/line/simple/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/line/simple-responsive/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/line/simple-responsive/index.ts
================================================
import 'chartist/dist/index.css';
import { LineChart, LineChartOptions, ResponsiveOptions } from 'chartist';
/* Add a basic data series with six labels and values */
const data = {
labels: ['1', '2', '3', '4', '5', '6'],
series: [
{
data: [1, 2, 3, 5, 8, 13]
}
]
};
/* Set some base options (settings will override the default settings in js *see default settings*). We are adding a basic label interpolation function for the xAxis labels. */
const options: LineChartOptions = {
axisX: {
labelInterpolationFnc: value => 'Calendar Week ' + value
}
};
/* Now we can specify multiple responsive settings that will override the base settings based on order and if the media queries match. In this example we are changing the visibility of dots and lines as well as use different label interpolations for space reasons. */
const responsiveOptions: ResponsiveOptions<LineChartOptions> = [
[
'screen and (min-width: 641px) and (max-width: 1024px)',
{
showPoint: false,
axisX: {
labelInterpolationFnc: value => 'Week ' + value
}
}
],
[
'screen and (max-width: 640px)',
{
showLine: false,
axisX: {
labelInterpolationFnc: value => 'W' + value
}
}
]
];
/* Initialize the chart with the above settings */
new LineChart('#chart', data, options, responsiveOptions);
================================================
FILE: sandboxes/line/simple-responsive/package.json
================================================
{
"name": "line-simple-responsive",
"description": "Simple responsive options",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/line/simple-responsive/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/line/simple-smoothing/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/line/simple-smoothing/index.ts
================================================
import 'chartist/dist/index.css';
import { LineChart, Interpolation } from 'chartist';
new LineChart(
'#chart',
{
labels: [1, 2, 3, 4, 5],
series: [
[1, 5, 10, 0, 1],
[10, 15, 0, 1, 2]
]
},
{
// Remove this configuration to see that chart rendered with cardinal spline interpolation
// Sometimes, on large jumps in data values, it's better to use simple smoothing.
lineSmooth: Interpolation.simple({
divisor: 2
}),
fullWidth: true,
chartPadding: {
right: 20
},
low: 0
}
);
================================================
FILE: sandboxes/line/simple-smoothing/package.json
================================================
{
"name": "line-simple-smoothing",
"description": "Line Interpolation / Smoothing",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/line/simple-smoothing/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/line/simple-svg-animation/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/line/simple-svg-animation/index.ts
================================================
import 'chartist/dist/index.css';
import { LineChart, easings } from 'chartist';
const chart = new LineChart(
'#chart',
{
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
series: [
[12, 4, 2, 8, 5, 4, 6, 2, 3, 3, 4, 6],
[4, 8, 9, 3, 7, 2, 10, 5, 8, 1, 7, 10]
]
},
{
low: 0,
showLine: false,
axisX: {
showLabel: false,
offset: 0
},
axisY: {
showLabel: false,
offset: 0
}
}
);
// Let's put a sequence number aside so we can use it in the event callbacks
let seq = 0;
// Once the chart is fully created we reset the sequence
chart.on('created', () => {
seq = 0;
});
// On each drawn element by Chartist we use the Svg API to trigger SMIL animations
chart.on('draw', data => {
if (data.type === 'point') {
// If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
data.element.animate({
opacity: {
// The delay when we like to start the animation
begin: seq++ * 80,
// Duration of the animation
dur: 500,
// The value where the animation should start
from: 0,
// The value where it should end
to: 1
},
x1: {
begin: seq++ * 80,
dur: 500,
from: data.x - 100,
to: data.x,
// You can specify an easing function name or use easing functions from `easings` directly
easing: easings.easeOutQuart
}
});
}
});
let timerId: any;
// For the sake of the example we update the chart every time it's created with a delay of 8 seconds
chart.on('created', () => {
if (timerId) {
clearTimeout(timerId);
}
timerId = setTimeout(chart.update.bind(chart), 8000);
});
================================================
FILE: sandboxes/line/simple-svg-animation/package.json
================================================
{
"name": "line-simple-svg-animation",
"description": "Simple SMIL Animations",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/line/simple-svg-animation/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/line/svg-animation/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/line/svg-animation/index.ts
================================================
import 'chartist/dist/index.css';
import { LineChart } from 'chartist';
const chart = new LineChart(
'#chart',
{
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
series: [
[12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
[4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
[5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
[3, 4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3]
]
},
{
low: 0
}
);
// Let's put a sequence number aside so we can use it in the event callbacks
let seq = 0;
const delays = 80;
const durations = 500;
// Once the chart is fully created we reset the sequence
chart.on('created', () => {
seq = 0;
});
// On each drawn element by Chartist we use the Svg API to trigger SMIL animations
chart.on('draw', data => {
seq++;
if (data.type === 'line') {
// If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
data.element.animate({
opacity: {
// The delay when we like to start the animation
begin: seq * delays + 1000,
// Duration of the animation
dur: durations,
// The value where the animation should start
from: 0,
// The value where it should end
to: 1
}
});
} else if (data.type === 'label' && data.axis.counterUnits.pos === 'x') {
data.element.animate({
y: {
begin: seq * delays,
dur: durations,
from: data.y + 100,
to: data.y,
// We can specify an easing function from Svg.Easing
easing: 'easeOutQuart'
}
});
} else if (data.type === 'label' && data.axis.counterUnits.pos === 'y') {
data.element.animate({
x: {
begin: seq * delays,
dur: durations,
from: data.x - 100,
to: data.x,
easing: 'easeOutQuart'
}
});
} else if (data.type === 'point') {
data.element.animate({
x1: {
begin: seq * delays,
dur: durations,
from: data.x - 10,
to: data.x,
easing: 'easeOutQuart'
},
x2: {
begin: seq * delays,
dur: durations,
from: data.x - 10,
to: data.x,
easing: 'easeOutQuart'
},
opacity: {
begin: seq * delays,
dur: durations,
from: 0,
to: 1,
easing: 'easeOutQuart'
}
});
} else if (data.type === 'grid') {
// Using data.axis we get x or y which we can use to construct our animation definition objects
const pos1Key = (data.axis.units.pos +
'1') as `${typeof data.axis.units.pos}1`;
const pos1Value = data[pos1Key];
const pos1Animation = {
begin: seq * delays,
dur: durations,
from: pos1Value - 30,
to: pos1Value,
easing: 'easeOutQuart' as const
};
const pos2Key = (data.axis.units.pos +
'2') as `${typeof data.axis.units.pos}2`;
const pos2Value = data[pos2Key];
const pos2Animation = {
begin: seq * delays,
dur: durations,
from: pos2Value - 100,
to: pos2Value,
easing: 'easeOutQuart' as const
};
const animations = {
[data.axis.units.pos + '1']: pos1Animation,
[data.axis.units.pos + '2']: pos2Animation,
opacity: {
begin: seq * delays,
dur: durations,
from: 0,
to: 1,
easing: 'easeOutQuart' as const
}
};
data.element.animate(animations);
}
});
let timerId: any;
// For the sake of the example we update the chart every time it's created with a delay of 8 seconds
chart.on('created', () => {
if (timerId) {
clearTimeout(timerId);
}
timerId = setTimeout(chart.update.bind(chart), 12000);
});
================================================
FILE: sandboxes/line/svg-animation/package.json
================================================
{
"name": "line-svg-animation",
"description": "Advanced SMIL Animations",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/line/svg-animation/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/line/timeseries/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/line/timeseries/index.ts
================================================
import 'chartist/dist/index.css';
import { LineChart, FixedScaleAxis } from 'chartist';
new LineChart(
'#chart',
{
series: [
{
name: 'series-1',
data: [
{ x: new Date(143134652600), y: 53 },
{ x: new Date(143234652600), y: 40 },
{ x: new Date(143340052600), y: 45 },
{ x: new Date(143366652600), y: 40 },
{ x: new Date(143410652600), y: 20 },
{ x: new Date(143508652600), y: 32 },
{ x: new Date(143569652600), y: 18 },
{ x: new Date(143579652600), y: 11 }
]
},
{
name: 'series-2',
data: [
{ x: new Date(143134652600), y: 53 },
{ x: new Date(143234652600), y: 35 },
{ x: new Date(143334652600), y: 30 },
{ x: new Date(143384652600), y: 30 },
{ x: new Date(143568652600), y: 10 }
]
}
]
},
{
axisX: {
type: FixedScaleAxis,
divisor: 5,
labelInterpolationFnc: value =>
new Date(value).toLocaleString(undefined, {
month: 'short',
day: 'numeric'
})
}
}
);
================================================
FILE: sandboxes/line/timeseries/package.json
================================================
{
"name": "line-timeseries",
"description": "Timeseries",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/line/timeseries/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/pie/custom-labels/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/pie/custom-labels/index.ts
================================================
import 'chartist/dist/index.css';
import { PieChart, PieChartOptions, ResponsiveOptions } from 'chartist';
const data = {
labels: ['Bananas', 'Apples', 'Grapes'],
series: [20, 15, 40]
};
const options: PieChartOptions = {
labelInterpolationFnc: value => String(value)[0]
};
const responsiveOptions: ResponsiveOptions<PieChartOptions> = [
[
'screen and (min-width: 640px)',
{
chartPadding: 30,
labelOffset: 100,
labelDirection: 'explode',
labelInterpolationFnc: value => value
}
],
[
'screen and (min-width: 1024px)',
{
labelOffset: 80,
chartPadding: 20
}
]
];
new PieChart('#chart', data, options, responsiveOptions);
================================================
FILE: sandboxes/pie/custom-labels/package.json
================================================
{
"name": "pie-custom-labels",
"description": "Pie chart with custom labels",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/pie/custom-labels/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/pie/donut-animation/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/pie/donut-animation/index.ts
================================================
import 'chartist/dist/index.css';
import { PieChart, easings, AnimationDefinition } from 'chartist';
const chart = new PieChart(
'#chart',
{
series: [10, 20, 50, 20, 5, 50, 15],
labels: [1, 2, 3, 4, 5, 6, 7]
},
{
donut: true,
showLabel: false
}
);
chart.on('draw', data => {
if (data.type === 'slice') {
// Get the total path length in order to use for dash array animation
const pathLength = data.element
.getNode<SVGGeometryElement>()
.getTotalLength();
// Set a dasharray that matches the path length as prerequisite to animate dashoffset
data.element.attr({
'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
});
// Create animation definition while also assigning an ID to the animation for later sync usage
const animationDefinition: Record<string, AnimationDefinition> = {
'stroke-dashoffset': {
id: 'anim' + data.index,
dur: 1000,
from: -pathLength + 'px',
to: '0px',
easing: easings.easeOutQuint,
// We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
fill: 'freeze'
}
};
// If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
if (data.index !== 0) {
animationDefinition['stroke-dashoffset'].begin =
'anim' + (data.index - 1) + '.end';
}
// We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
data.element.attr({
'stroke-dashoffset': -pathLength + 'px'
});
// We can't use guided mode as the animations need to rely on setting begin manually
data.element.animate(animationDefinition, false);
}
});
let timerId: any;
// For the sake of the example we update the chart every time it's created with a delay of 8 seconds
chart.on('created', () => {
if (timerId) {
clearTimeout(timerId);
}
timerId = setTimeout(chart.update.bind(chart), 10000);
});
================================================
FILE: sandboxes/pie/donut-animation/package.json
================================================
{
"name": "pie-donut-animation",
"description": "Animating a Donut with Svg.animate",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/pie/donut-animation/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/pie/donut-chart/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/pie/donut-chart/index.ts
================================================
import 'chartist/dist/index.css';
import { PieChart } from 'chartist';
new PieChart(
'#chart',
{
series: [20, 10, 30, 40]
},
{
donut: true,
donutWidth: 60,
startAngle: 270,
showLabel: true
}
);
================================================
FILE: sandboxes/pie/donut-chart/package.json
================================================
{
"name": "pie-donut-chart",
"description": "Donut chart",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/pie/donut-chart/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/pie/simple/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/pie/simple/index.ts
================================================
import 'chartist/dist/index.css';
import { PieChart } from 'chartist';
const data = {
series: [5, 3, 4]
};
new PieChart('#chart', data, {
labelInterpolationFnc: value =>
Math.round((+value / data.series.reduce((a, b) => a + b)) * 100) + '%'
});
================================================
FILE: sandboxes/pie/simple/package.json
================================================
{
"name": "pie-simple",
"description": "Simple pie chart",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/pie/simple/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/pie/simple-gauge/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<script defer src="./index.ts"></script>
</head>
<body>
<div id="chart" style="height: 50vh"></div>
</body>
</html>
================================================
FILE: sandboxes/pie/simple-gauge/index.ts
================================================
import 'chartist/dist/index.css';
import { PieChart } from 'chartist';
new PieChart(
'#chart',
{
series: [20, 10, 30, 40]
},
{
donut: true,
donutWidth: 60,
startAngle: 270,
total: 200,
showLabel: false
}
);
================================================
FILE: sandboxes/pie/simple-gauge/package.json
================================================
{
"name": "pie-simple-gauge",
"description": "Gauge chart",
"main": "index.ts",
"dependencies": {
"chartist": "^1.0.0"
}
}
================================================
FILE: sandboxes/pie/simple-gauge/sandbox.config.json
================================================
{
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "parcel"
}
================================================
FILE: sandboxes/tsconfig.json
================================================
{
"extends": "../tsconfig.json",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"chartist": ["../src"]
}
},
"include": ["."]
}
================================================
FILE: scripts/styles.cjs
================================================
#!/usr/bin/env node
const fs = require('fs').promises;
const path = require('path');
const sass = require('sass');
const postcss = require('postcss');
const { plugins } = require('../postcss.config.cjs');
const pkg = require('../package.json');
const cwd = process.cwd();
const input = process.argv[2];
const output = pkg.style;
const sourceMapOutput = output.replace('.css', '.css.map');
async function compile() {
let styles;
styles = sass.compile(input, {
sourceMap: true
});
styles.sourceMap.sources = styles.sourceMap.sources.map(_ =>
_.replace(cwd, '')
);
styles = await postcss(plugins).process(styles.css, {
from: input,
to: output,
map: {
prev: styles.sourceMap
}
});
const map = styles.map.toString();
const css =
styles.css + `\n/*# sourceMappingURL=${path.basename(sourceMapOutput)} */`;
await fs.mkdir(path.dirname(output), {
recursive: true
});
await Promise.all([
fs.writeFile(output, css),
fs.writeFile(sourceMapOutput, map)
]);
}
async function copySrc() {
const srcDir = path.dirname(input);
const distDir = path.dirname(output);
const srcFiles = await fs.readdir(srcDir);
await Promise.all(
srcFiles.map(file =>
fs.copyFile(path.join(srcDir, file), path.join(distDir, file))
)
);
}
Promise.all([compile(), copySrc()]);
================================================
FILE: src/axes/AutoScaleAxis.ts
================================================
import type {
ChartRect,
AxisOptions,
Bounds,
NormalizedSeries,
NormalizedSeriesPrimitiveValue
} from '../core';
import { getBounds, getHighLow, getMultiValue } from '../core';
import { AxisUnits, Axis } from './Axis';
export class AutoScaleAxis extends Axis {
private readonly bounds: Bounds;
public override readonly range: {
min: number;
max: number;
};
constructor(
axisUnit: AxisUnits,
data: NormalizedSeries[],
chartRect: ChartRect,
options: AxisOptions
) {
// Usually we calculate highLow based on the data but this can be overriden by a highLow object in the options
const highLow = options.highLow || getHighLow(data, options, axisUnit.pos);
const bounds = getBounds(
chartRect[axisUnit.rectEnd] - chartRect[axisUnit.rectStart],
highLow,
options.scaleMinSpace || 20,
options.onlyInteger
);
const range = {
min: bounds.min,
max: bounds.max
};
super(axisUnit, chartRect, bounds.values);
this.bounds = bounds;
this.range = range;
}
projectValue(value: NormalizedSeriesPrimitiveValue) {
const finalValue = Number(getMultiValue(value, this.units.pos));
return (
(this.axisLength * (finalValue - this.bounds.min)) / this.bounds.range
);
}
}
================================================
FILE: src/axes/Axis.spec.ts
================================================
import type { ChartRect } from '../core';
import { Svg } from '../svg';
import { EventEmitter } from '../event';
import { Axis, axisUnits } from './Axis';
class MockAxis extends Axis {
projectValue(value: number) {
return value;
}
}
describe('Axes', () => {
describe('Axis', () => {
let ticks: number[];
let chartRect: ChartRect;
let chartOptions: any;
let eventEmitter: EventEmitter;
let gridGroup: Svg;
let labelGroup: Svg;
beforeEach(() => {
eventEmitter = new EventEmitter();
gridGroup = new Svg('g');
labelGroup = new Svg('g');
ticks = [1, 2];
chartRect = {
padding: {
bottom: 5,
left: 10,
right: 15,
top: 15
},
y2: 15,
y1: 250,
x1: 50,
x2: 450,
width() {
return this.x2 - this.x1;
},
height() {
return this.y1 - this.y2;
}
};
chartOptions = {
axisX: {
offset: 30,
position: 'end',
labelOffset: {
x: 0,
y: 0
},
showLabel: true,
showGrid: true
},
classNames: {
label: 'ct-label',
labelGroup: 'ct-labels',
grid: 'ct-grid',
gridGroup: 'ct-grids',
vertical: 'ct-vertical',
horizontal: 'ct-horizontal',
start: 'ct-start',
end: 'ct-end'
}
};
});
it('should skip all grid lines and labels for interpolated value of null', () => {
chartOptions.axisX.labelInterpolationFnc = (
value: number,
index: number
) => (index === 0 ? null : value);
const axis = new MockAxis(axisUnits.x, chartRect, ticks);
axis.createGridAndLabels(
gridGroup,
labelGroup,
chartOptions,
eventEmitter
);
expect(
(gridGroup.querySelectorAll('.ct-grid') as any).svgElements.length
).toBe(1);
expect(
(labelGroup.querySelectorAll('.ct-label') as any).svgElements.length
).toBe(1);
});
it('should skip all grid lines and labels for interpolated value of undefined', () => {
chartOptions.axisX.labelInterpolationFnc = (
value: number,
index: number
) => (index === 0 ? undefined : value);
const axis = new MockAxis(axisUnits.x, chartRect, ticks);
axis.createGridAndLabels(
gridGroup,
labelGroup,
chartOptions,
eventEmitter
);
expect(
(gridGroup.querySelectorAll('.ct-grid') as any).svgElements.length
).toBe(1);
expect(
(labelGroup.querySelectorAll('.ct-label') as any).svgElements.length
).toBe(1);
});
it('should include all grid lines and labels for interpolated value of empty strings', () => {
chartOptions.axisX.labelInterpolationFnc = (
value: number,
index: number
) => (index === 0 ? '' : value);
const axis = new MockAxis(axisUnits.x, chartRect, ticks);
axis.createGridAndLabels(
gridGroup,
labelGroup,
chartOptions,
eventEmitter
);
expect(
(gridGroup.querySelectorAll('.ct-grid') as any).svgElements.length
).toBe(2);
expect(
(labelGroup.querySelectorAll('.ct-label') as any).svgElements.length
).toBe(2);
});
});
});
================================================
FILE: src/axes/Axis.ts
================================================
import type {
Label,
ChartRect,
OptionsWithDefaults,
NormalizedSeriesPrimitiveValue,
NormalizedSeries
} from '../core';
import type { Svg } from '../svg';
import type { EventEmitter } from '../event';
import { isFalseyButZero } from '../utils';
import { createGrid, createLabel } from '../core';
export const axisUnits = {
x: {
pos: 'x',
len: 'width',
dir: 'horizontal',
rectStart: 'x1',
rectEnd: 'x2',
rectOffset: 'y2'
},
y: {
pos: 'y',
len: 'height',
dir: 'vertical',
rectStart: 'y2',
rectEnd: 'y1',
rectOffset: 'x1'
}
} as const;
export type XAxisUnits = typeof axisUnits.x;
export type YAxisUnits = typeof axisUnits.y;
export type AxisUnits = XAxisUnits | YAxisUnits;
export abstract class Axis {
public readonly counterUnits: AxisUnits;
public readonly range:
| {
min: number;
max: number;
}
| undefined;
readonly axisLength: number;
private readonly gridOffset: number;
constructor(
public readonly units: AxisUnits,
private readonly chartRect: ChartRect,
private readonly ticks: Label[]
) {
this.counterUnits = units === axisUnits.x ? axisUnits.y : axisUnits.x;
this.axisLength =
chartRect[this.units.rectEnd] - chartRect[this.units.rectStart];
this.gridOffset = chartRect[this.units.rectOffset];
}
abstract projectValue(
value: NormalizedSeriesPrimitiveValue | Label,
index?: number,
series?: NormalizedSeries
): number;
createGridAndLabels(
gridGroup: Svg,
labelGroup: Svg,
chartOptions: OptionsWithDefaults,
eventEmitter: EventEmitter
) {
const axisOptions =
this.units.pos === 'x' ? chartOptions.axisX : chartOptions.axisY;
const projectedValues = this.ticks.map((tick, i) =>
this.projectValue(tick, i)
);
const labelValues = this.ticks.map(axisOptions.labelInterpolationFnc);
projectedValues.forEach((projectedValue, index) => {
const labelValue = labelValues[index];
const labelOffset = {
x: 0,
y: 0
};
// TODO: Find better solution for solving this problem
// Calculate how much space we have available for the label
let labelLength;
if (projectedValues[index + 1]) {
// If we still have one label ahead, we can calculate the distance to the next tick / label
labelLength = projectedValues[index + 1] - projectedValue;
} else {
// If we don't have a label ahead and we have only two labels in total, we just take the remaining distance to
// on the whole axis length. We limit that to a minimum of 30 pixel, so that labels close to the border will
// still be visible inside of the chart padding.
labelLength = Math.max(
this.axisLength - projectedValue,
this.axisLength / this.ticks.length
);
}
// Skip grid lines and labels where interpolated label values are falsey (except for 0)
if (labelValue !== '' && isFalseyButZero(labelValue)) {
return;
}
// Transform to global coordinates using the chartRect
// We also need to set the label offset for the createLabel function
if (this.units.pos === 'x') {
projectedValue = this.chartRect.x1 + projectedValue;
labelOffset.x = chartOptions.axisX.labelOffset.x;
// If the labels should be positioned in start position (top side for vertical axis) we need to set a
// different offset as for positioned with end (bottom)
if (chartOptions.axisX.position === 'start') {
labelOffset.y =
this.chartRect.padding.top + chartOptions.axisX.labelOffset.y + 5;
} else {
labelOffset.y =
this.chartRect.y1 + chartOptions.axisX.labelOffset.y + 5;
}
} else {
projectedValue = this.chartRect.y1 - projectedValue;
labelOffset.y = chartOptions.axisY.labelOffset.y - labelLength;
// If the labels should be positioned in start position (left side for horizontal axis) we need to set a
// different offset as for positioned with end (right side)
if (chartOptions.axisY.position === 'start') {
labelOffset.x =
this.chartRect.padding.left + chartOptions.axisY.labelOffset.x;
} else {
labelOffset.x =
this.chartRect.x2 + chartOptions.axisY.labelOffset.x + 10;
}
}
if (axisOptions.showGrid) {
createGrid(
projectedValue,
index,
this,
this.gridOffset,
this.chartRect[this.counterUnits.len](),
gridGroup,
[
chartOptions.classNames.grid,
chartOptions.classNames[this.units.dir]
],
eventEmitter
);
}
if (axisOptions.showLabel) {
createLabel(
projectedValue,
labelLength,
index,
labelValue,
this,
axisOptions.offset,
labelOffset,
labelGroup,
[
chartOptions.classNames.label,
chartOptions.classNames[this.units.dir],
axisOptions.position === 'start'
? chartOptions.classNames[axisOptions.position]
: chartOptions.classNames.end
],
eventEmitter
);
}
});
}
}
================================================
FILE: src/axes/FixedScaleAxis.spec.ts
================================================
import { FixedScaleAxis } from './FixedScaleAxis';
describe('Axes', () => {
describe('FixedScaleAxis', () => {
it('should order the tick array', () => {
const ticks = [10, 5, 0, -5, -10];
const axisUnit = {
pos: 'y',
len: 'height',
dir: 'vertical',
rectStart: 'y2',
rectEnd: 'y1',
rectOffset: 'x1'
} as const;
const data = [
[
{ x: 1, y: 10 },
{ x: 2, y: 5 },
{ x: 3, y: -5 }
]
];
const chartRect: any = {
padding: {
top: 15,
right: 15,
bottom: 5,
left: 10
},
y2: 15,
y1: 141,
x1: 50,
x2: 269
};
const options = {
offset: 40,
position: 'start' as const,
labelOffset: { x: 0, y: 0 },
showLabel: true,
showGrid: true,
scaleMinSpace: 20,
onlyInteger: false,
ticks
};
const fsaxis: any = new FixedScaleAxis(
axisUnit,
data,
chartRect,
options
);
expect(fsaxis.ticks).toEqual([-10, -5, 0, 5, 10]);
});
});
});
================================================
FILE: src/axes/FixedScaleAxis.ts
================================================
import type {
ChartRect,
AxisOptions,
NormalizedSeries,
NormalizedSeriesPrimitiveValue
} from '../core';
import { getMultiValue, getHighLow } from '../core/data';
import { times } from '../utils';
import { AxisUnits, Axis } from './Axis';
export class FixedScaleAxis extends Axis {
public override readonly range: {
min: number;
max: number;
};
constructor(
axisUnit: AxisUnits,
data: NormalizedSeries[],
chartRect: ChartRect,
options: AxisOptions
) {
const highLow = options.highLow || getHighLow(data, options, axisUnit.pos);
const divisor = options.divisor || 1;
const ticks = (
options.ticks ||
times(
divisor,
index => highLow.low + ((highLow.high - highLow.low) / divisor) * index
)
).sort((a, b) => Number(a) - Number(b));
const range = {
min: highLow.low,
max: highLow.high
};
super(axisUnit, chartRect, ticks);
this.range = range;
}
projectValue(value: NormalizedSeriesPrimitiveValue) {
const finalValue = Number(getMultiValue(value, this.units.pos));
return (
(this.axisLength * (finalValue - this.range.min)) /
(this.range.max - this.range.min)
);
}
}
================================================
FILE: src/axes/StepAxis.spec.ts
================================================
import { StepAxis } from './StepAxis';
describe('Axes', () => {
describe('StepAxis', () => {
it('should return 0 if options.ticks.length == 1', () => {
const ticks = [1];
const axisUnit = {
pos: 'y',
len: 'height',
dir: 'vertical',
rectStart: 'y2',
rectEnd: 'y1',
rectOffset: 'x1'
} as const;
const data = [[1]];
const chartRect: any = {
y2: 0,
y1: 15,
x1: 50,
x2: 100
};
const options = {
ticks
};
const stepAxis: any = new StepAxis(axisUnit, data, chartRect, options);
expect(stepAxis.stepLength).toEqual(15);
});
});
});
================================================
FILE: src/axes/StepAxis.ts
================================================
import type { ChartRect, AxisOptions } from '../core';
import { AxisUnits, Axis } from './Axis';
export class StepAxis extends Axis {
private readonly stepLength: number;
public readonly stretch: boolean;
constructor(
axisUnit: AxisUnits,
_data: unknown,
chartRect: ChartRect,
options: AxisOptions
) {
const ticks = options.ticks || [];
super(axisUnit, chartRect, ticks);
const calc = Math.max(1, ticks.length - (options.stretch ? 1 : 0));
this.stepLength = this.axisLength / calc;
this.stretch = Boolean(options.stretch);
}
projectValue(_value: unknown, index: number) {
return this.stepLength * index;
}
}
================================================
FILE: src/axes/index.ts
================================================
export * from './Axis';
export * from './AutoScaleAxis';
export * from './FixedScaleAxis';
export * from './StepAxis';
export * from './types';
================================================
FILE: src/axes/types.ts
================================================
import type { AutoScaleAxis } from './AutoScaleAxis';
import type { FixedScaleAxis } from './FixedScaleAxis';
import type { StepAxis } from './StepAxis';
export type AxisType =
| typeof AutoScaleAxis
| typeof FixedScaleAxis
| typeof StepAxis;
================================================
FILE: src/charts/BarChart/BarChart.spec.ts
================================================
import { AutoScaleAxis } from '../../axes';
import { BarChartOptions, BarChartData, BarChart } from '.';
import { namespaces, deserialize } from '../../core';
import {
Fixture,
addMockWrapper,
destroyMockDom,
mockDom,
mockDomRects,
destroyMockDomRects
} from '../../../test/mock/dom';
describe('Charts', () => {
describe('BarChart', () => {
let fixture: Fixture;
let chart: BarChart;
let options: BarChartOptions;
let data: BarChartData;
function createChart() {
return new Promise<void>(resolve => {
fixture = addMockWrapper(
'<div class="ct-chart ct-golden-section"></div>'
);
const { wrapper } = fixture;
chart = new BarChart(
wrapper.querySelector('.ct-chart'),
data,
options
).on('created', () => {
resolve();
chart.off('created');
});
});
}
beforeEach(() => {
mockDom();
mockDomRects();
});
afterEach(() => {
destroyMockDom();
destroyMockDomRects();
data = { series: [] };
options = {};
});
describe('grids', () => {
beforeEach(() => {
data = {
series: [
[
{ x: 1, y: 1 },
{ x: 3, y: 5 }
]
]
};
options = {
axisX: {
type: AutoScaleAxis,
onlyInteger: true
},
axisY: {
type: AutoScaleAxis,
onlyInteger: true
}
};
});
it('should contain ct-grids group', async () => {
data = { series: [] };
options = {};
await createChart();
expect(fixture.wrapper.querySelectorAll('g.ct-grids').length).toBe(1);
});
it('should draw grid lines', async () => {
await createChart();
expect(
fixture.wrapper.querySelectorAll(
'g.ct-grids line.ct-grid.ct-horizontal'
).length
).toBe(3);
expect(
fixture.wrapper.querySelectorAll(
'g.ct-grids line.ct-grid.ct-vertical'
).length
).toBe(6);
});
it('should draw grid background', async () => {
options.showGridBackground = true;
await createChart();
expect(
fixture.wrapper.querySelectorAll('g.ct-grids rect.ct-grid-background')
.length
).toBe(1);
});
it('should not draw grid background if option set to false', async () => {
options.showGridBackground = false;
await createChart();
expect(
fixture.wrapper.querySelectorAll('g.ct-grids rect.ct-grid-background')
.length
).toBe(0);
});
});
describe('ct:value attribute', () => {
it('should contain x and y value for each bar', async () => {
data = {
series: [
[
{ x: 1, y: 2 },
{ x: 3, y: 4 }
]
]
};
options = {
axisX: {
type: AutoScaleAxis
}
};
await createChart();
const bars = fixture.wrapper.querySelectorAll('.ct-bar');
expect(bars[0].getAttributeNS(namespaces.ct, 'value')).toEqual('1,2');
expect(bars[1].getAttributeNS(namespaces.ct, 'value')).toEqual('3,4');
});
it('should render values that are zero', async () => {
data = {
series: [
[
{ x: 0, y: 1 },
{ x: 2, y: 0 },
{ x: 0, y: 0 }
]
]
};
options = {
axisX: {
type: AutoScaleAxis
}
};
await createChart();
const bars = fixture.wrapper.querySelectorAll('.ct-bar');
expect(bars[0].getAttributeNS(namespaces.ct, 'value')).toEqual('0,1');
expect(bars[1].getAttributeNS(namespaces.ct, 'value')).toEqual('2,0');
expect(bars[2].getAttributeNS(namespaces.ct, 'value')).toEqual('0,0');
});
});
describe('Meta data tests', () => {
it('should render meta data correctly with mixed value array', async () => {
const meta = {
test: 'Serialized Test'
};
data = {
labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu'],
series: [
[
5,
2,
4,
{
value: 2,
meta: meta
},
0
]
]
};
await createChart();
const bar = fixture.wrapper.querySelectorAll('.ct-bar')[3];
expect(deserialize(bar.getAttributeNS(namespaces.ct, 'meta'))).toEqual(
meta
);
});
it('should render meta data correctly with mixed value array and different normalized data length', async () => {
const meta = {
test: 'Serialized Test'
};
data = {
labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [
[
5,
2,
4,
{
value: 2,
meta: meta
},
0
]
]
};
await createChart();
const bar = fixture.wrapper.querySelectorAll('.ct-bar')[3];
expect(deserialize(bar.getAttributeNS(namespaces.ct, 'meta'))).toEqual(
meta
);
});
it('should render meta data correctly with mixed value array and mixed series notation', async () => {
const seriesMeta = 9999;
const valueMeta = {
test: 'Serialized Test'
};
data = {
labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [
[
5,
2,
4,
{
value: 2,
meta: valueMeta
},
0
],
{
meta: seriesMeta,
data: [
5,
2,
{
value: 2,
meta: valueMeta
},
0
]
}
]
};
await createChart();
expect(
deserialize(
fixture.wrapper
.querySelectorAll('.ct-series-a .ct-bar')[3]
.getAttributeNS(namespaces.ct, 'meta')
)
).toEqual(valueMeta);
expect(
deserialize(
fixture.wrapper
.querySelector('.ct-series-b')
?.getAttributeNS(namespaces.ct, 'meta')
)
).toEqual(seriesMeta);
expect(
deserialize(
fixture.wrapper
.querySelectorAll('.ct-series-b .ct-bar')[2]
.getAttributeNS(namespaces.ct, 'meta')
)
).toEqual(valueMeta);
});
});
describe('Empty data tests', () => {
it('should render empty grid with no data', async () => {
data = { series: [] };
options = {};
await createChart();
// Find at least one vertical grid line
expect(
document.querySelector('.ct-grids .ct-grid.ct-vertical')
).toBeDefined();
});
it('should render empty grid with only labels', async () => {
data = {
labels: [1, 2, 3, 4],
series: []
};
await createChart();
// Find at least one vertical grid line
expect(
document.querySelector('.ct-grids .ct-grid.ct-vertical')
).toBeDefined();
// Find exactly as many horizontal grid lines as labels were specified (Step Axis)
expect(
document.querySelectorAll('.ct-grids .ct-grid.ct-horizontal').length
).toBe(data.labels?.length);
});
it('should generate labels and render empty grid with only series in data', async () => {
data = {
series: [
[1, 2, 3, 4],
[2, 3, 4],
[3, 4]
]
};
await createChart();
// Find at least one vertical grid line
expect(
document.querySelector('.ct-grids .ct-grid.ct-vertical')
).toBeDefined();
// Should generate the labels using the largest series count
expect(
document.querySelectorAll('.ct-grids .ct-grid.ct-horizontal').length
).toBe(
Math.max(
...data.series.map(series =>
Array.isArray(series) ? series.length : 0
)
)
);
});
it('should render empty grid with no data and specified high low', async () => {
options = {
width: 400,
height: 300,
high: 100,
low: -100
};
await createChart();
// Find first and last label
const labels = document.querySelectorAll(
'.ct-labels .ct-label.ct-vertical'
);
const firstLabel = labels[0];
const lastLabel = labels[labels.length - 1];
expect(firstLabel.textContent?.trim()).toBe('-100');
expect(lastLabel.textContent?.trim()).toBe('100');
});
it('should render empty grid with no data and reverseData option', async () => {
options = {
reverseData: true
};
await createChart();
// Find at least one vertical grid line
expect(
document.querySelector('.ct-grids .ct-grid.ct-vertical')
).toBeDefined();
});
it('should render empty grid with no data and stackBars option', async () => {
options = {
stackBars: true
};
await createChart();
// Find at least one vertical grid line
expect(
document.querySelector('.ct-grids .ct-grid.ct-vertical')
).toBeDefined();
});
it('should render empty grid with no data and horizontalBars option', async () => {
options = {
horizontalBars: true
};
await createChart();
// Find at least one vertical grid line
// TODO: In theory the axis should be created with ct-horizontal class
expect(
document.querySelector('.ct-grids .ct-grid.ct-vertical')
).toBeDefined();
});
it('should render empty grid with no data and distributeSeries option', async () => {
options = {
distributeSeries: true
};
await createChart();
// Find at least one vertical grid line
expect(
document.querySelector('.ct-grids .ct-grid.ct-vertical')
).toBeDefined();
});
});
it('should correct apply class names', async () => {
data = {
labels: ['A', 'B', 'C'],
series: [
{
className: 'series-1',
data: [1, 2, 3]
},
{
className: 'series-2',
data: [4, 5, 6]
}
]
};
options = {
reverseData: true
};
await createChart();
const seriesElements = document.querySelectorAll('.ct-series');
expect(seriesElements[0]).toHaveClass('series-2');
expect(seriesElements[0]).toContainHTML('ct:value="6"');
expect(seriesElements[1]).toHaveClass('series-1');
expect(seriesElements[1]).toContainHTML('ct:value="3"');
});
});
});
================================================
FILE: src/charts/BarChart/BarChart.stories.ts
================================================
import 'chartist-dev/styles';
import { BarChart, AutoScaleAxis, Svg, getMultiValue } from 'chartist-dev';
import { Viewport } from '../../../test/utils/storyshots/viewport';
export default {
title: 'BarChart',
argTypes: {}
};
export function Default() {
const root = document.createElement('div');
new BarChart(
root,
{
series: [
[
{ x: 1, y: 1 },
{ x: 3, y: 5 }
]
]
},
{
axisX: {
type: AutoScaleAxis,
onlyInteger: true
},
axisY: {
type: AutoScaleAxis,
onlyInteger: true
}
}
);
return root;
}
export function BiPolar() {
const root = document.createElement('div');
new BarChart(
root,
{
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
series: [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]]
},
{
high: 10,
low: -10,
axisX: {
labelInterpolationFnc(value, index) {
return index % 2 === 0 ? value : null;
}
}
}
);
return root;
}
export function Labels() {
const root = document.createElement('div');
new BarChart(
root,
{
labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu'],
series: [[5, 2, 4, 2, 0]]
},
{}
);
return root;
}
export function MultilineLabels() {
const root = document.createElement('div');
new BarChart(
root,
{
labels: [
'First quarter of the year',
'Second quarter of the year',
'Third quarter of the year',
'Fourth quarter of the year'
],
series: [
[60000, 40000, 80000, 70000],
[40000, 30000, 70000, 65000],
[8000, 3000, 10000, 6000]
]
},
{
seriesBarDistance: 10,
axisX: {
offset: 60
},
axisY: {
offset: 80,
labelInterpolationFnc(value) {
return value + ' CHF';
},
scaleMinSpace: 15
}
}
);
return root;
}
export function LabelsPlacement() {
const root = document.createElement('div');
new BarChart(
root,
{
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [
[5, 4, 3, 7, 5, 10, 3],
[3, 2, 9, 5, 4, 6, 4]
]
},
{
axisX: {
// On the x-axis start means top and end means bottom
position: 'start'
},
axisY: {
// On the y-axis start means left and end means right
position: 'end'
}
}
);
return root;
}
export function MultiSeries() {
const root = document.createElement('div');
new BarChart(
root,
{
series: [
[1, 2, 3, 4],
[2, 3, 4],
[3, 4]
]
},
{}
);
return root;
}
export function DistributedSeries() {
const root = document.createElement('div');
new BarChart(
root,
{
labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
series: [20, 60, 120, 200, 180, 20, 10]
},
{
distributeSeries: true
}
);
return root;
}
export function ReverseData() {
const root = document.createElement('div');
new BarChart(
root,
{
series: [
[1, 2, 3, 4],
[2, 3, 4],
[3, 4]
]
},
{
reverseData: true
}
);
return root;
}
export function Stack() {
const root = document.createElement('div');
new BarChart(
root,
{
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
series: [
[800000, 1200000, 1400000, 1300000],
[200000, 400000, 500000, 300000],
[100000, 200000, 400000, 600000]
]
},
{
stackBars: true,
axisY: {
labelInterpolationFnc(value) {
return Number(value) / 1000 + 'k';
}
}
}
).on('draw', data => {
if (data.type === 'bar') {
data.element.attr({
style: 'stroke-width: 30px'
});
}
});
return root;
}
export function Horizontal() {
const root = document.createElement('div');
new BarChart(
root,
{
labels: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
series: [
[5, 4, 3, 7, 5, 10, 3],
[3, 2, 9, 5, 4, 6, 4]
]
},
{
seriesBarDistance: 10,
reverseData: true,
horizontalBars: true,
axisY: {
offset: 70
}
}
);
return root;
}
export function Adaptive() {
const root = document.createElement('div');
new BarChart(
root,
{
labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
series: [
[5, 4, 3, 7],
[3, 2, 9, 5],
[1, 5, 8, 4],
[2, 3, 4, 6],
[4, 1, 2, 1]
]
},
{
// Default mobile configuration
stackBars: true,
axisX: {
labelInterpolationFnc: value =>
String(value)
.split(/\s+/)
.map(word => word[0])
.join('')
},
axisY: {
offset: 20
}
},
[
// Options override for media > 400px
[
'screen and (min-width: 400px)',
{
reverseData: true,
horizontalBars: true,
axisX: {
labelInterpolationFnc: () => undefined
},
axisY: {
offset: 60
}
}
],
// Options override for media > 800px
[
'screen and (min-width: 800px)',
{
stackBars: false,
seriesBarDistance: 10
}
],
// Options override for media > 1000px
[
'screen and (min-width: 1000px)',
{
reverseData: false,
horizontalBars: false,
seriesBarDistance: 15
}
]
]
);
return root;
}
Adaptive.parameters = {
storyshots: {
viewports: [
Viewport.Default,
Viewport.Tablet,
Viewport.MobileLandscape,
Viewport.Mobile
]
}
};
export function OverlappingBarsOnMobile() {
const root = document.createElement('div');
new BarChart(
root,
{
labels: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
series: [
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
[3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
]
},
{
seriesBarDistance: 10
},
[
[
'screen and (max-width: 640px)',
{
seriesBarDistance: 5,
axisX: {
labelInterpolationFnc(value) {
return String(value)[0];
}
}
}
]
]
);
return root;
}
OverlappingBarsOnMobile.parameters = {
storyshots: {
viewports: [Viewport.Default, Viewport.Mobile]
}
};
export function PeakCircles() {
const root = document.createElement('div');
new BarChart(
root,
{
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
series: [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]]
},
{
high: 10,
low: -10,
axisX: {
labelInterpolationFnc(value, index) {
return index % 2 === 0 ? value : null;
}
}
}
).on('draw', data => {
// If this draw event is of type bar we can use the data to create additional content
if (data.type === 'bar') {
// We use the group element of the current series to append a simple circle with the bar peek coordinates and a circle radius that is depending on the value
data.group.append(
new Svg(
'circle',
{
cx: data.x2,
cy: data.y2,
r: Math.abs(Number(getMultiValue(data.value))) * 2 + 5
},
'ct-slice-pie'
)
);
}
});
return root;
}
export function AccumulateRelativeStack() {
const root = document.createElement('div');
new BarChart(
root,
{
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday'],
series: [
[5, 4, -3, -5],
[5, -4, 3, -5]
]
},
{
stackBars: true,
stackMode: 'accumulate-relative'
}
);
return root;
}
export function ViewBox() {
const root = document.createElement('div');
new BarChart(
root,
{
series: [
[
{ x: 1, y: 1 },
{ x: 3, y: 5 }
]
]
},
{
axisX: {
type: AutoScaleAxis,
onlyInteger: true
},
axisY: {
type: AutoScaleAxis,
onlyInteger: true
},
viewBox: {
width: 800,
height: 300
}
},
[
[
'screen and (max-width: 575px)',
{
viewBox: {
width: 400,
height: 150
}
}
]
]
);
return root;
}
================================================
FILE: src/charts/BarChart/BarChart.ts
================================================
import type { Axis } from '../../axes';
import type {
BarChartData,
BarChartOptions,
BarChartOptionsWithDefaults,
BarChartCreatedEvent,
BarDrawEvent,
BarChartEventsTypes
} from './BarChart.types';
import type {
NormalizedSeries,
ResponsiveOptions,
AllSeriesTypes
} from '../../core';
import {
isNumeric,
noop,
serialMap,
extend,
safeHasProperty,
each
} from '../../utils';
import {
alphaNumerate,
normalizeData,
serialize,
getMetaData,
getHighLow,
createSvg,
createChartRect,
createGridBackground
} from '../../core';
import { AutoScaleAxis, StepAxis, axisUnits } from '../../axes';
import { BaseChart } from '../BaseChart';
function getSerialSums(series: NormalizedSeries[]) {
return serialMap(series, (...args) =>
Array.from(args).reduce<{ x: number; y: number }>(
(prev, curr) => {
return {
x: prev.x + (safeHasProperty(curr, 'x') ? curr.x : 0),
y: prev.y + (safeHasProperty(curr, 'y') ? curr.y : 0)
};
},
{ x: 0, y: 0 }
)
);
}
/**
* Default options in bar charts. Expand the code view to see a detailed list of options with comments.
*/
const defaultOptions = {
// Options for X-Axis
axisX: {
// The offset of the chart drawing area to the border of the container
offset: 30,
// Position where labels are placed. Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis.
position: 'end' as const,
// Allows you to correct label positioning on this axis by positive or negative x and y offset.
labelOffset: {
x: 0,
y: 0
},
// If labels should be shown or not
showLabel: true,
// If the axis grid should be drawn or not
showGrid: true,
// Interpolation function that allows you to intercept the value from the axis label
labelInterpolationFnc: noop,
// This value specifies the minimum width in pixel of the scale steps
scaleMinSpace: 30,
// Use only integer values (whole numbers) for the scale steps
onlyInteger: false
},
// Options for Y-Axis
axisY: {
// The offset of the chart drawing area to the border of the container
offset: 40,
// Position where labels are placed. Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis.
position: 'start' as const,
// Allows you to correct label positioning on this axis by positive or negative x and y offset.
labelOffset: {
x: 0,
y: 0
},
// If labels should be shown or not
showLabel: true,
// If the axis grid should be drawn or not
showGrid: true,
// Interpolation function that allows you to intercept the value from the axis label
labelInterpolationFnc: noop,
// This value specifies the minimum height in pixel of the scale steps
scaleMinSpace: 20,
// Use only integer values (whole numbers) for the scale steps
onlyInteger: false
},
// Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
width: undefined,
// Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
height: undefined,
// Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value
high: undefined,
// Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value
low: undefined,
// Unless low/high are explicitly set, bar chart will be centered at zero by default. Set referenceValue to null to auto scale.
referenceValue: 0,
// Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
chartPadding: {
top: 15,
right: 15,
bottom: 5,
left: 10
},
// Specify the distance in pixel of bars in a group
seriesBarDistance: 15,
// If set to true this property will cause the series bars to be stacked. Check the `stackMode` option for further stacking options.
stackBars: false,
// If set to true this property will force the stacked bars to draw from the zero line.
// If set to 'accumulate' this property will form a total for each series point. This will also influence the y-axis and the overall bounds of the chart. In stacked mode the seriesBarDistance property will have no effect.
// If set to 'accumulate-relative' positive and negative values will be handled separately.
stackMode: 'accumulate' as const,
// Inverts the axes of the bar chart in order to draw a horizontal bar chart. Be aware that you also need to invert your axis settings as the Y Axis will now display the labels and the X Axis the values.
horizontalBars: false,
// If set to true then each bar will represent a series and the data array is expected to be a one dimensional array of data values rather than a series array of series. This is useful if the bar chart should represent a profile rather than some data over time.
distributeSeries: false,
// If true the whole data is reversed including labels, the series order as well as the whole series data arrays.
reverseData: false,
// If the bar chart should add a background fill to the .ct-grids group.
showGridBackground: false,
// Override the class names that get used to generate the SVG structure of the chart
classNames: {
chart: 'ct-chart-bar',
horizontalBars: 'ct-horizontal-bars',
label: 'ct-label',
labelGroup: 'ct-labels',
series: 'ct-series',
bar: 'ct-bar',
grid: 'ct-grid',
gridGroup: 'ct-grids',
gridBackground: 'ct-grid-background',
vertical: 'ct-vertical',
horizontal: 'ct-horizontal',
start: 'ct-start',
end: 'ct-end'
}
};
export class BarChart extends BaseChart<BarChartEventsTypes> {
/**
* This method creates a new bar chart and returns API object that you can use for later changes.
* @param query A selector query string or directly a DOM element
* @param data The data object that needs to consist of a labels and a series array
* @param options The options object with options that override the default options. Check the examples for a detailed list.
* @param responsiveOptions Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]]
* @return An object which exposes the API for the created chart
*
* @example
* ```ts
* // Create a simple bar chart
* const data = {
* labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
* series: [
* [5, 2, 4, 2, 0]
* ]
* };
*
* // In the global name space Chartist we call the Bar function to initialize a bar chart. As a first parameter we pass in a selector where we would like to get our chart created and as a second parameter we pass our data object.
* new BarChart('.ct-chart', data);
* ```
*
* @example
* ```ts
* // This example creates a bipolar grouped bar chart where the boundaries are limitted to -10 and 10
* new BarChart('.ct-chart', {
* labels: [1, 2, 3, 4, 5, 6, 7],
* series: [
* [1, 3, 2, -5, -3, 1, -6],
* [-5, -2, -4, -1, 2, -3, 1]
* ]
* }, {
* seriesBarDistance: 12,
* low: -10,
* high: 10
* });
* ```
*/
constructor(
query: string | Element | null,
protected override data: BarChartData,
options?: BarChartOptions,
responsiveOptions?: ResponsiveOptions<BarChartOptions>
) {
super(
query,
data,
defaultOptions,
extend({}, defaultOptions, options),
responsiveOptions
);
}
/**
* Creates a new chart
*/
createChart(options: BarChartOptionsWithDefaults) {
const { data } = this;
const normalizedData = normalizeData(
data,
options.reverseData,
options.horizontalBars ? 'x' : 'y',
true
);
// Create new svg element
const svg = createSvg(
this.container,
options.width,
options.height,
options.classNames.chart +
(options.horizontalBars ? ' ' + options.classNames.horizontalBars : ''),
options.viewBox
);
const highLow =
options.stackBars &&
options.stackMode !== true &&
normalizedData.series.length
? // If stacked bars we need to calculate the high low from stacked values from each series
getHighLow(
[getSerialSums(normalizedData.series)],
options,
options.horizontalBars ? 'x' : 'y'
)
: getHighLow(
normalizedData.series,
options,
options.horizontalBars ? 'x' : 'y'
);
this.svg = svg;
// Drawing groups in correct order
const gridGroup = svg.elem('g').addClass(options.classNames.gridGroup);
const seriesGroup = svg.elem('g');
const labelGroup = svg.elem('g').addClass(options.classNames.labelGroup);
// Overrides of high / low from settings
if (typeof options.high === 'number') {
highLow.high = options.high;
}
if (typeof options.low === 'number') {
highLow.low = options.low;
}
const chartRect = createChartRect(svg, options);
let valueAxis: Axis;
const labelAxisTicks = // We need to set step count based on some options combinations
options.distributeSeries && options.stackBars
? // If distributed series are enabled and bars need to be stacked, we'll only have one bar and therefore should
// use only the first label for the step axis
normalizedData.labels.slice(0, 1)
: // If distributed series are enabled but stacked bars aren't, we should use the series labels
// If we are drawing a regular bar chart with two dimensional series data, we just use the labels array
// as the bars are normalized
normalizedData.labels;
let labelAxis: Axis;
let axisX: Axis;
let axisY: Axis;
// Set labelAxis and valueAxis based on the horizontalBars setting. This setting will flip the axes if necessary.
if (options.horizontalBars) {
if (options.axisX.type === undefined) {
valueAxis = axisX = new AutoScaleAxis(
axisUnits.x,
normalizedData.series,
chartRect,
{ ...options.axisX, highLow: highLow, referenceValue: 0 }
);
} else {
// eslint-disable-next-line new-cap
valueAxis = axisX = new options.axisX.type(
axisUnits.x,
normalizedData.series,
chartRect,
{ ...options.axisX, highLow: highLow, referenceValue: 0 }
);
}
if (options.axisY.type === undefined) {
labelAxis = axisY = new StepAxis(
axisUnits.y,
normalizedData.series,
chartRect,
{
ticks: labelAxisTicks
}
);
} else {
// eslint-disable-next-line new-cap
labelAxis = axisY = new options.axisY.type(
axisUnits.y,
normalizedData.series,
chartRect,
options.axisY
);
}
} else {
if (options.axisX.type === undefined) {
labelAxis = axisX = new StepAxis(
axisUnits.x,
normalizedData.series,
chartRect,
{
ticks: labelAxisTicks
}
);
} else {
// eslint-disable-next-line new-cap
labelAxis = axisX = new options.axisX.type(
axisUnits.x,
normalizedData.series,
chartRect,
options.axisX
);
}
if (options.axisY.type === undefined) {
valueAxis = axisY = new AutoScaleAxis(
axisUnits.y,
normalizedData.series,
chartRect,
{ ...options.axisY, highLow: highLow, referenceValue: 0 }
);
} else {
// eslint-disable-next-line new-cap
valueAxis = axisY = new options.axisY.type(
axisUnits.y,
normalizedData.series,
chartRect,
{ ...options.axisY, highLow: highLow, referenceValue: 0 }
);
}
}
// Projected 0 point
const zeroPoint = options.horizontalBars
? chartRect.x1 + valueAxis.projectValue(0)
: chartRect.y1 - valueAxis.projectValue(0);
const isAccumulateStackMode = options.stackMode === 'accumulate';
const isAccumulateRelativeStackMode =
options.stackMode === 'accumulate-relative';
// Used to track the screen coordinates of stacked bars
const posStackedBarValues: number[] = [];
const negStackedBarValues: number[] = [];
let stackedBarValues = posStackedBarValues;
labelAxis.createGridAndLabels(
gridGroup,
labelGroup,
options,
this.eventEmitter
);
valueAxis.createGridAndLabels(
gridGroup,
labelGroup,
options,
this.eventEmitter
);
if (options.showGridBackground) {
createGridBackground(
gridGroup,
chartRect,
options.classNames.gridBackground,
this.eventEmitter
);
}
// Draw the series
each<AllSeriesTypes[number]>(
data.series,
(series, seriesIndex) => {
// Calculating bi-polar value of index for seriesOffset. For i = 0..4 biPol will be -1.5, -0.5, 0.5, 1.5 etc.
const biPol = seriesIndex - (data.series.length - 1) / 2;
// Half of the period width between vertical grid lines used to position bars
let periodHalfLength: number;
// We need to set periodHalfLength based on some options combinations
if (options.distributeSeries && !options.stackBars) {
// If distributed series are enabled but stacked bars aren't, we need to use the length of the normaizedData array
// which is the series count and divide by 2
periodHalfLength =
labelAxis.axisLength / normalizedData.series.length / 2;
} else if (options.distributeSeries && options.stackBars) {
// If distributed series and stacked bars are enabled we'll only get one bar so we should just divide the axis
// length by 2
periodHalfLength = labelAxis.axisLength / 2;
} else {
// On regular bar charts we should just use the series length
periodHalfLength =
labelAxis.axisLength /
normalizedData.series[seriesIndex].length /
2;
}
// Adding the series group to the series element
const seriesElement = seriesGroup.elem('g');
const seriesName = safeHasProperty(series, 'name') && series.name;
const seriesClassName =
safeHasProperty(series, 'className') && series.className;
const seriesMeta = safeHasProperty(series, 'meta')
? series.meta
: undefined;
// Write attributes to series group element. If series name or meta is undefined the attributes will not be written
if (seriesName) {
seriesElement.attr({
'ct:series-name': seriesName
});
}
if (seriesMeta) {
seriesElement.attr({
'ct:meta': serialize(seriesMeta)
});
}
// Use series class from series data or if not set generate one
seriesElement.addClass(
[
options.classNames.series,
seriesClassName ||
`${options.classNames.series}-${alphaNumerate(seriesIndex)}`
].join(' ')
);
normalizedData.series[seriesIndex].forEach((value, valueIndex) => {
const valueX = safeHasProperty(value, 'x') && value.x;
const valueY = safeHasProperty(value, 'y') && value.y;
let labelAxisValueIndex;
// We need to set labelAxisValueIndex based on some options combinations
if (options.distributeSeries && !options.stackBars) {
// If distributed series are enabled but stacked bars aren't, we can use the seriesIndex for later projection
// on the step axis for label positioning
labelAxisValueIndex = seriesIndex;
} else if (options.distributeSeries && options.stackBars) {
// If distributed series and stacked bars are enabled, we will only get one bar and therefore always use
// 0 for projection on the label step axis
labelAxisValueIndex = 0;
} else {
// On regular bar charts we just use the value index to project on the label step axis
labelAxisValueIndex = valueIndex;
}
let projected;
// We need to transform coordinates differently based on the chart layout
if (options.horizontalBars) {
projected = {
x:
chartRect.x1 +
valueAxis.projectValue(
valueX || 0,
valueIndex,
normalizedData.series[seriesIndex]
),
y:
chartRect.y1 -
labelAxis.projectValue(
valueY || 0,
labelAxisValueIndex,
normalizedData.series[seriesIndex]
)
};
} else {
projected = {
x:
chartRect.x1 +
labelAxis.projectValue(
valueX || 0,
labelAxisValueIndex,
normalizedData.series[seriesIndex]
),
y:
chartRect.y1 -
valueAxis.projectValue(
valueY || 0,
valueIndex,
normalizedData.series[seriesIndex]
)
};
}
// If the label axis is a step based axis we will offset the bar into the middle of between two steps using
// the periodHalfLength value. Also we do arrange the different series so that they align up to each other using
// the seriesBarDistance. If we don't have a step axis, the bar positions can be chosen freely so we should not
// add any automated positioning.
if (labelAxis instanceof StepAxis) {
// Offset to center bar between grid lines, but only if the step axis is not stretched
if (!labelAxis.stretch) {
projected[labelAxis.units.pos] +=
periodHalfLength * (options.horizontalBars ? -1 : 1);
}
// Using bi-polar offset for multiple series if no stacked bars or series distribution is used
projected[labelAxis.units.pos] +=
options.stackBars || options.distributeSeries
? 0
: biPol *
options.seriesBarDistance *
(options.horizontalBars ? -1 : 1);
}
// distinguish between positive and negative values in relative stack mode
if (isAccumulateRelativeStackMode) {
stackedBarValues =
valueY >= 0 || valueX >= 0
? posStackedBarValues
: negStackedBarValues;
}
// Enter value in stacked bar values used to remember previous screen value for stacking up bars
const previousStack = stackedBarValues[valueIndex] || zeroPoint;
stackedBarValues[valueIndex] =
previousStack - (zeroPoint - projected[labelAxis.counterUnits.pos]);
// Skip if value is undefined
if (value === undefined) {
return;
}
const positions = {
[`${labelAxis.units.pos}1`]: projected[labelAxis.units.pos],
[`${labelAxis.units.pos}2`]: projected[labelAxis.units.pos]
} as Record<'x1' | 'y1' | 'x2' | 'y2', number>;
if (
options.stackBars &&
(isAccumulateStackMode ||
isAccumulateRelativeStackMode ||
!options.stackMode)
) {
// Stack mode: accumulate (default)
// If bars are stacked we use the stackedBarValues reference and otherwise base all bars off the zero line
// We want backwards compatibility, so the expected fallback without the 'stackMode' option
// to be the original behaviour (accumulate)
positions[`${labelAxis.counterUnits.pos}1`] = previousStack;
positions[`${labelAxis.counterUnits.pos}2`] =
stackedBarValues[valueIndex];
} else {
// Draw from the zero line normally
// This is also the same code for Stack mode: overlap
positions[`${labelAxis.counterUnits.pos}1`] = zeroPoint;
positions[`${labelAxis.counterUnits.pos}2`] =
projected[labelAxis.counterUnits.pos];
}
// Limit x and y so that they are within the chart rect
positions.x1 = Math.min(
Math.max(positions.x1, chartRect.x1),
chartRect.x2
);
positions.x2 = Math.min(
Math.max(positions.x2, chartRect.x1),
chartRect.x2
);
positions.y1 = Math.min(
Math.max(positions.y1, chartRect.y2),
chartRect.y1
);
positions.y2 = Math.min(
Math.max(positions.y2, chartRect.y2),
chartRect.y1
);
const metaData = getMetaData(series, valueIndex);
// Create bar element
const bar = seriesElement
.elem('line', positions, options.classNames.bar)
.attr({
'ct:value': [valueX, valueY].filter(isNumeric).join(','),
'ct:meta': serialize(metaData)
});
this.eventEmitter.emit<BarDrawEvent>('draw', {
type: 'bar',
value,
index: valueIndex,
meta: metaData,
series,
seriesIndex,
axisX,
axisY,
chartRect,
group: seriesElement,
element: bar,
...positions
});
});
},
options.reverseData
);
this.eventEmitter.emit<BarChartCreatedEvent>('created', {
chartRect,
axisX,
axisY,
svg,
options
});
}
}
================================================
FILE: src/charts/BarChart/BarChart.types.ts
================================================
import type {
Options,
AxisOptions,
Data,
CreatedEvent,
DrawEvent,
NormalizedMulti,
AxesDrawEvent
} from '../../core';
import type { RequiredKeys } from '../../utils';
import type { BaseChartEventsTypes } from '../types';
export type BarChartData = Data;
export interface BarChartOptions<
TXAxisOptions = AxisOptions,
TYAxisOptions = TXAxisOptions
> extends Options<TXAxisOptions, TYAxisOptions> {
/**
* Override the class names that get used to generate the SVG structure of the chart
*/
classNames?: {
chart?: string;
horizontalBars?: string;
label?: string;
labelGroup?: string;
series?: string;
bar?: string;
grid?: string;
gridGroup?: string;
gridBackground?: string;
vertical?: string;
horizontal?: string;
start?: string;
end?: string;
};
/**
* Specify the distance in pixel of bars in a group
*/
seriesBarDistance?: number;
/**
* If set to true this property will cause the series bars to be stacked. Check the `stackMode` option for further stacking options.
*/
stackBars?: boolean;
/**
* If set to true this property will force the stacked bars to draw from the zero line.
* If set to 'accumulate' this property will form a total for each series point. This will also influence the y-axis and the overall bounds of the chart. In stacked mode the seriesBarDistance property will have no effect.
* If set to 'accumulate-relative' positive and negative values will be handled separately.
*/
stackMode?: 'accumulate' | 'accumulate-relative' | boolean;
/**
* Inverts the axes of the bar chart in order to draw a horizontal bar chart. Be aware that you also need to invert your axis settings as the Y Axis will now display the labels and the X Axis the values.
*/
horizontalBars?: boolean;
/**
* If set to true then each bar will represent a series and the data array is expected to be a one dimensional array of data values rather than a series array of series. This is useful if the bar chart should represent a profile rather than some data over time.
*/
distributeSeries?: boolean;
/**
* If true the whole data is reversed including labels, the series order as well as the whole series data arrays.
*/
reverseData?: boolean;
/**
* If the bar chart should add a background fill to the .ct-grids group.
*/
showGridBackground?: boolean;
}
export type BarChartOptionsWithDefaults = RequiredKeys<
BarChartOptions<
RequiredKeys<
AxisOptions,
| 'offset'
| 'position'
| 'labelOffset'
| 'showLabel'
| 'showGrid'
| 'labelInterpolationFnc'
| 'scaleMinSpace'
>,
RequiredKeys<
AxisOptions,
| 'offset'
| 'position'
| 'labelOffset'
| 'showLabel'
| 'showGrid'
| 'labelInterpolationFnc'
| 'scaleMinSpace'
>
>,
| 'referenceValue'
| 'chartPadding'
| 'seriesBarDistance'
| 'stackMode'
| 'axisX'
| 'axisY',
'classNames'
>;
export type BarChartCreatedEvent = CreatedEvent<BarChartOptions>;
export interface BarDrawEvent extends DrawEvent {
type: 'bar';
value: number | NormalizedMulti;
x1: number;
y1: number;
x2: number;
y2: number;
}
export type BarChartEventsTypes = BaseChartEventsTypes<
BarChartCreatedEvent,
AxesDrawEvent | BarDrawEvent
>;
================================================
FILE: src/charts/BarChart/index.ts
================================================
export * from './BarChart';
export * from './BarChart.types';
================================================
FILE: src/charts/BaseChart.ts
================================================
import type { Data, Options, DataEvent, ResponsiveOptions } from '../core';
import type { Svg } from '../svg';
import type { BaseChartEventsTypes } from './types';
import { OptionsProvider, optionsProvider } from '../core';
import { extend } from '../utils';
import { EventListener, AllEventsListener, EventEmitter } from '../event';
const instances = new WeakMap<Element, BaseChart<unknown>>();
export abstract class BaseChart<TEventsTypes = BaseChartEventsTypes> {
protected svg?: Svg;
protected readonly container: Element;
protected readonly eventEmitter = new EventEmitter();
private readonly resizeListener = () => this.update();
// Using event loop for first draw to make it possible to register event listeners in the same call stack where
// the chart was created.
private initializeTimeoutId: NodeJS.Timer | null = setTimeout(
() => this.initialize(),
0
);
private optionsProvider?: OptionsProvider<Options>;
constructor(
query: string | Element | null,
protected data: Data,
private readonly defaultOptions: Options,
private options: Options,
private readonly responsiveOptions?: ResponsiveOptions<Options>
) {
const container =
typeof query === 'string' ? document.querySelector(query) : query;
if (!container) {
throw new Error(
`Target element ${
typeof query === 'string' ? `"${query}"` : ''
} is not found`
);
}
this.container = container;
const prevInstance = instances.get(container);
// If chartist was already initialized in this container we are detaching all event listeners first
if (prevInstance) {
prevInstance.detach();
}
instances.set(container, this);
}
abstract createChart(options: Options): void;
// TODO: Currently we need to re-draw the chart on window resize. This is usually very bad and will affect performance.
// This is done because we can't work with relative coordinates when drawing the chart because SVG Path does not
// work with relative positions yet. We need to check if we can do a viewBox hack to switch to percentage.
// See http://mozilla.6506.n7.nabble.com/Specyfing-paths-with-percentages-unit-td247474.html
// Update: can be done using the above method tested here: http://codepen.io/gionkunz/pen/KDvLj
// The problem is with the label offsets that can't be converted into percentage and affecting the chart container
/**
* Updates the chart which currently does a full reconstruction of the SVG DOM
* @param data Optional data you'd like to set for the chart before it will update. If not specified the update method will use the data that is already configured with the chart.
* @param options Optional options you'd like to add to the previous options for the chart before it will update. If not specified the update method will use the options that have been already configured with the chart.
* @param override If set to true, the passed options will be used to extend the options that have been configured already. Otherwise the chart default options will be used as the base
*/
update(data?: Data, options?: Options, override = false) {
if (data) {
this.data = data || {};
this.data.labels = this.data.labels || [];
this.data.series = this.data.series || [];
// Event for data transformation that allows to manipulate the data before it gets rendered in the charts
this.eventEmitter.emit<DataEvent>('data', {
type: 'update',
data: this.data
});
}
if (options) {
this.options = extend(
{},
override ? this.options : this.defaultOptions,
options
);
// If chartist was not initialized yet, we just set the options and leave the rest to the initialization
// Otherwise we re-create the optionsProvider at this point
if (!this.initializeTimeoutId) {
this.optionsProvider?.removeMediaQueryListeners();
this.optionsProvider = optionsProvider(
this.options,
this.responsiveOptions,
this.eventEmitter
);
}
}
// Only re-created the chart if it has been initialized yet
if (!this.initializeTimeoutId && this.optionsProvider) {
this.createChart(this.optionsProvider.getCurrentOptions());
}
// Return a reference to the chart object to chain up calls
return this;
}
/**
* This method can be called on the API object of each chart and will un-register all event listeners that were added to other components. This currently includes a window.resize listener as well as media query listeners if any responsive options have been provided. Use this function if you need to destroy and recreate Chartist charts dynamically.
*/
detach() {
// Only detach if initialization already occurred on this chart. If this chart still hasn't initialized (therefore
// the initializationTimeoutId is still a valid timeout reference, we will clear the timeout
if (!this.initializeTimeoutId) {
window.removeEventListener('resize', this.resizeListener);
this.optionsProvider?.removeMediaQueryListeners();
} else {
window.clearTimeout(this.initializeTimeoutId);
}
instances.delete(this.container);
return this;
}
/**
* Use this function to register event handlers. The handler callbacks are synchronous and will run in the main thread rather than the event loop.
* @param event Name of the event. Check the examples for supported events.
* @param listener The handler function that will be called when an event with the given name was emitted. This function will receive a data argument which contains event data. See the example for more details.
*/
on<T extends keyof TEventsTypes>(
event: T,
listener: EventListener<TEventsTypes[T]>
): this;
on(event: '*', listener: AllEventsListener): this;
on(event: string, listener: EventListener): this;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
on(event: string, listener: any) {
this.eventEmitter.on(event, listener);
return this;
}
/**
* Use this function to un-register event handlers. If the handler function parameter is omitted all handlers for the given event will be un-registered.
* @param event Name of the event for which a handler should be removed
* @param listener The handler function that that was previously used to register a new event handler. This handler will be removed from the event handler list. If this parameter is omitted then all event handlers for the given event are removed from the list.
*/
off<T extends keyof TEventsTypes>(
event: T,
listener?: EventListener<TEventsTypes[T]>
): this;
off(event: '*', listener?: AllEventsListener): this;
off(event: string, listener?: EventListener): this;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
off(event: string, listener?: any) {
this.eventEmitter.off(event, listener);
return this;
}
initialize() {
// Add window resize listener that re-creates the chart
window.addEventListener('resize', this.resizeListener);
// Obtain current options based on matching media queries (if responsive options are given)
// This will also register a listener that is re-creating the chart based on media changes
this.optionsProvider = optionsProvider(
this.options,
this.responsiveOptions,
this.eventEmitter
);
// Register options change listener that will trigger a chart update
this.eventEmitter.on('optionsChanged', () => this.update());
// Before the first chart creation we need to register us with all plugins that are configured
// Initialize all relevant plugins with our chart object and the plugin options specified in the config
if (this.options.plugins) {
this.options.plugins.forEach(plugin => {
if (Array.isArray(plugin)) {
plugin[0](this, plugin[1]);
} else {
plugin(this);
}
});
}
// Event for data transformation that allows to manipulate the data before it gets rendered in the charts
this.eventEmitter.emit<DataEvent>('data', {
type: 'initial',
data: this.data
});
// Create the first chart
this.createChart(this.optionsProvider.getCurrentOptions());
// As chart is initialized from the event loop now we can reset our timeout reference
// This is important if the chart gets initialized on the same element twice
this.initializeTimeoutId = null;
}
}
================================================
FILE: src/charts/LineChart/LineChart.spec.ts
================================================
import { AutoScaleAxis, FixedScaleAxis } from '../../axes';
import { LineChartOptions, LineChartData, LineChart } from '.';
import * as Interpolation from '../../interpolation';
import { namespaces, deserialize } from '../../core';
import {
Fixture,
addMockWrapper,
destroyMockDom,
mockDom,
mockDomRects,
destroyMockDomRects
} from '../../../test/mock/dom';
describe('Charts', () => {
describe('LineChart', () => {
let fixture: Fixture;
let chart: LineChart;
let options: LineChartOptions;
let data: LineChartData;
function createChart() {
return new Promise<void>(resolve => {
fixture = addMockWrapper(
'<div class="ct-chart ct-golden-section"></div>'
);
const { wrapper } = fixture;
chart = new LineChart(
wrapper.querySelector('.ct-chart'),
data,
options
).on('created', () => {
resolve();
chart.off('created');
});
});
}
beforeEach(() => {
mockDom();
mockDomRects();
});
afterEach(() => {
destroyMockDom();
destroyMockDomRects();
data = { series: [] };
options = {};
});
describe('grids', () => {
beforeEach(() => {
data = {
series: [
[
{ x: 1, y: 1 },
{ x: 3, y: 5 }
]
]
};
options = {
axisX: {
type: AutoScaleAxis,
onlyInteger: true
},
axisY: {
type: AutoScaleAxis,
onlyInteger: true
}
};
});
it('should contain ct-grids group', async () => {
await createChart();
expect(fixture.wrapper.querySelectorAll('.ct-grids').length).toBe(1);
});
it('should draw grid lines', async () => {
await createChart();
expect(
fixture.wrapper.querySelectorAll('.ct-grids .ct-grid.ct-horizontal')
.length
).toBe(3);
expect(
fixture.wrapper.querySelectorAll('.ct-grids .ct-grid.ct-vertical')
.length
).toBe(5);
});
it('should draw grid background', async () => {
options.showGridBackground = true;
await createChart();
expect(
fixture.wrapper.querySelectorAll('.ct-grids .ct-grid-background')
.length
).toBe(1);
});
it('should not draw grid background if option set to false', async () => {
options.showGridBackground = false;
await createChart();
expect(
fixture.wrapper.querySelectorAll('.ct-grids .ct-grid-background')
.length
).toBe(0);
});
});
describe('AxisY position tests', () => {
beforeEach(() => {
data = {
series: [
[
{ x: 1, y: 1 },
{ x: 3, y: 5 }
]
]
};
options = {};
});
it('should have ct-start class if position start', async () => {
options = {
axisY: {
position: 'start'
}
};
await createChart();
Array.from(
fixture.wrapper.querySelectorAll('.ct-label.ct-vertical')
).forEach(element =>
expect(element).toHaveAttribute(
'class',
'ct-label ct-vertical ct-start'
)
);
});
it('should have ct-end class if position is any other value than start', async () => {
options = {
axisY: {
position: 'end' as const
}
};
await createChart();
Array.from(
fixture.wrapper.querySelectorAll('.ct-label.ct-vertical')
).forEach(element =>
expect(element).toHaveAttribute(
'class',
'ct-label ct-vertical ct-end'
)
);
});
});
describe('ct:value attribute', () => {
it('should contain x and y value for each datapoint', async () => {
data = {
series: [
[
{ x: 1, y: 2 },
{ x: 3, y: 4 }
]
]
};
options = {
axisX: {
type: FixedScaleAxis
}
};
await createChart();
const points = fixture.wrapper.querySelectorAll('.ct-point');
expect(points[0].getAttributeNS(namespaces.ct, 'value')).toBe('1,2');
expect(points[1].getAttributeNS(namespaces.ct, 'value')).toBe('3,4');
});
it('should render values that are zero', async () => {
data = {
series: [
[
{ x: 0, y: 1 },
{ x: 1, y: 0 },
{ x: 0, y: 0 }
]
]
};
options = {
axisX: {
type: FixedScaleAxis
}
};
await createChart();
const points = fixture.wrapper.querySelectorAll('.ct-point');
expect(points[0].getAttributeNS(namespaces.ct, 'value')).toBe('0,1');
expect(points[1].getAttributeNS(namespaces.ct, 'value')).toBe('1,0');
expect(points[2].getAttributeNS(namespaces.ct, 'value')).toBe('0,0');
});
});
describe('Meta data tests', () => {
it('should render meta data correctly with mixed value array', async () => {
const meta = {
test: 'Serialized Test'
};
data = {
labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu'],
series: [
[
5,
2,
4,
{
value: 2,
meta: meta
},
0
]
]
};
await createChart();
const points = fixture.wrapper.querySelectorAll('.ct-point');
expect(
deserialize(points[3].getAttributeNS(namespaces.ct, 'meta'))
).toEqual(meta);
});
it('should render meta data correctly with mixed value array and different normalized data length', async () => {
const meta = {
test: 'Serialized Test'
};
data = {
labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [
[
5,
2,
4,
{
value: 2,
meta: meta
},
0
]
]
};
await createChart();
const points = fixture.wrapper.querySelectorAll('.ct-point');
expect(
deserialize(points[3].getAttributeNS(namespaces.ct, 'meta'))
).toEqual(meta);
});
it('should render meta data correctly with mixed value array and mixed series notation', async () => {
const seriesMeta = 9999;
const valueMeta = {
test: 'Serialized Test'
};
data = {
labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [
[
5,
2,
4,
{
value: 2,
meta: valueMeta
},
0
],
{
meta: seriesMeta,
data: [
5,
2,
{
value: 2,
meta: valueMeta
},
0
]
}
]
};
await createChart();
expect(
deserialize(
fixture.wrapper
.querySelectorAll('.ct-series-a .ct-point')[3]
.getAttributeNS(namespaces.ct, 'meta')
)
).toEqual(valueMeta);
expect(
deserialize(
fixture.wrapper
.querySelector('.ct-series-b')
?.getAttributeNS(namespaces.ct, 'meta')
)
).toEqual(seriesMeta);
expect(
deserialize(
fixture.wrapper
.querySelectorAll('.ct-series-b .ct-point')[2]
.getAttributeNS(namespaces.ct, 'meta')
)
).toEqual(valueMeta);
});
});
describe('Line charts with holes', () => {
it('should render correctly with Interpolation.none and holes everywhere', async () => {
data = {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
series: [
[
NaN,
15,
0,
null,
2,
3,
4,
undefined,
{ value: 1, meta: 'meta data' },
null
]
]
};
options = {
lineSmooth: false
};
await createChart();
chart.on('draw', context => {
if (context.type === 'line') {
expect(
context.path.pathElements.map(pathElement => {
return {
command: pathElement.command,
data: pathElement.data
};
})
).toEqual([
{
command: 'M',
data: {
valueIndex: 1,
value: { x: undefined, y: 15 },
meta: undefined
}
},
{
command: 'L',
data: {
valueIndex: 2,
value: { x: undefined, y: 0 },
meta: undefined
}
},
{
command: 'M',
data: {
valueIndex: 4,
value: { x: undefined, y: 2 },
meta: undefined
}
},
{
command: 'L',
data: {
valueIndex: 5,
value: { x: undefined, y: 3 },
meta: undefined
}
},
{
command: 'L',
data: {
valueIndex: 6,
value: { x: undefined, y: 4 },
meta: undefined
}
},
{
command: 'M',
data: {
valueIndex: 8,
value: { x: undefined, y: 1 },
meta: 'meta data'
}
}
]);
}
});
});
it('should render correctly with Interpolation.cardinal and holes everywhere', async () => {
data = {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
series: [
[
NaN,
15,
0,
null,
2,
3,
4,
undefined,
{ value: 1, meta: 'meta data' },
null
]
]
};
options = {
lineSmooth: true
};
await createChart();
chart.on('draw', context => {
if (context.type === 'line') {
expect(
context.path.pathElements.map(pathElement => {
return {
command: pathElement.command,
data: pathElement.data
};
})
).toEqual([
{
command: 'M',
data: {
valueIndex: 1,
value: { x: undefined, y: 15 },
meta: undefined
}
},
// Cardinal should create Line path segment if only one connection
{
command: 'L',
data: {
valueIndex: 2,
value: { x: undefined, y: 0 },
meta: undefined
}
},
{
command: 'M',
data: {
valueIndex: 4,
value: { x: undefined, y: 2 },
meta: undefined
}
},
// Cardinal should create Curve path segment for 2 or more connections
{
command: 'C',
data: {
valueIndex: 5,
value: { x: undefined, y: 3 },
meta: undefined
}
},
{
command: 'C',
data: {
valueIndex: 6,
value: { x: undefined, y: 4 },
meta: undefined
}
},
{
command: 'M',
data: {
valueIndex: 8,
value: { x: undefined, y: 1 },
meta: 'meta data'
}
}
]);
}
});
});
it('should render correctly with Interpolation.monotoneCubic and holes everywhere', async () => {
data = {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
series: [
[
NaN,
15,
0,
null,
2,
3,
4,
undefined,
{ value: 1, meta: 'meta data' },
null
]
]
};
options = {
lineSmooth: Interpolation.monotoneCubic()
};
await createChart();
chart.on('draw', context => {
if (context.type === 'line') {
expect(
context.path.pathElements.map(pathElement => {
return {
command: pathElement.command,
data: pathElement.data
};
})
).toEqual([
{
command: 'M',
data: {
valueIndex: 1,
value: { x: undefined, y: 15 },
meta: undefined
}
},
// Monotone cubic should create Line path segment if only one connection
{
command: 'L',
data: {
valueIndex: 2,
value: { x: undefined, y: 0 },
meta: undefined
}
},
{
command: 'M',
data: {
valueIndex: 4,
value: { x: undefined, y: 2 },
meta: undefined
}
},
// Monotone cubic should create Curve path segment for 2 or more connections
{
command: 'C',
data: {
valueIndex: 5,
value: { x: undefined, y: 3 },
gitextract_93mw5ltc/
├── .browserslistrc
├── .clean-publish
├── .commitlintrc.json
├── .czrc
├── .editorconfig
├── .eslintrc.json
├── .gitattributes
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug-report.yml
│ │ ├── config.yml
│ │ └── feature-request.yml
│ ├── renovate.json
│ └── workflows/
│ ├── checks.yml
│ ├── ci.yml
│ ├── commit.yml
│ ├── release.yml
│ ├── update-storyshots.yml
│ └── website.yml
├── .gitignore
├── .nano-staged.json
├── .npmrc
├── .nvmrc
├── .prettierrc
├── .simple-git-hooks.json
├── .simple-release.json
├── .size-limit.json
├── .storybook/
│ ├── main.js
│ ├── manager.js
│ ├── package.json
│ ├── preview.js
│ └── theme.js
├── .tool-versions
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE-MIT
├── LICENSE-WTFPL
├── README.md
├── jest.config.json
├── package.json
├── pnpm-workspace.yaml
├── postcss.config.cjs
├── rollup.config.js
├── sandboxes/
│ ├── bar/
│ │ ├── bi-polar-interpolated/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── distributed-series/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── extreme-responsive/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── horizontal/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── label-position/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── multiline/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── overlapping-bars/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── stacked/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── stacked-accumulate-relative/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ └── with-circle-modify-drawing/
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── package.json
│ │ └── sandbox.config.json
│ ├── line/
│ │ ├── area/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── axis-auto/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── axis-fixed-and-auto/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── bipolar-area/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── data-fill-holes/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── data-holes/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── modify-drawing/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── only-integer/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── path-animation/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── scatter-random/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── series-override/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── simple/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── simple-responsive/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── simple-smoothing/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── simple-svg-animation/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── svg-animation/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ └── timeseries/
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── package.json
│ │ └── sandbox.config.json
│ ├── pie/
│ │ ├── custom-labels/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── donut-animation/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── donut-chart/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ ├── simple/
│ │ │ ├── index.html
│ │ │ ├── index.ts
│ │ │ ├── package.json
│ │ │ └── sandbox.config.json
│ │ └── simple-gauge/
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── package.json
│ │ └── sandbox.config.json
│ └── tsconfig.json
├── scripts/
│ └── styles.cjs
├── src/
│ ├── axes/
│ │ ├── AutoScaleAxis.ts
│ │ ├── Axis.spec.ts
│ │ ├── Axis.ts
│ │ ├── FixedScaleAxis.spec.ts
│ │ ├── FixedScaleAxis.ts
│ │ ├── StepAxis.spec.ts
│ │ ├── StepAxis.ts
│ │ ├── index.ts
│ │ └── types.ts
│ ├── charts/
│ │ ├── BarChart/
│ │ │ ├── BarChart.spec.ts
│ │ │ ├── BarChart.stories.ts
│ │ │ ├── BarChart.ts
│ │ │ ├── BarChart.types.ts
│ │ │ └── index.ts
│ │ ├── BaseChart.ts
│ │ ├── LineChart/
│ │ │ ├── LineChart.spec.ts
│ │ │ ├── LineChart.stories.ts
│ │ │ ├── LineChart.ts
│ │ │ ├── LineChart.types.ts
│ │ │ └── index.ts
│ │ ├── PieChart/
│ │ │ ├── PieChart.spec.ts
│ │ │ ├── PieChart.stories.ts
│ │ │ ├── PieChart.ts
│ │ │ ├── PieChart.types.ts
│ │ │ └── index.ts
│ │ ├── index.ts
│ │ └── types.ts
│ ├── core/
│ │ ├── constants.ts
│ │ ├── creation.spec.ts
│ │ ├── creation.ts
│ │ ├── data/
│ │ │ ├── bound.spec.ts
│ │ │ ├── bounds.ts
│ │ │ ├── data.ts
│ │ │ ├── highLow.ts
│ │ │ ├── index.ts
│ │ │ ├── normalize.spec.ts
│ │ │ ├── normalize.ts
│ │ │ ├── segments.spec.ts
│ │ │ ├── segments.ts
│ │ │ ├── serialize.spec.ts
│ │ │ └── serialize.ts
│ │ ├── index.ts
│ │ ├── lang.spec.ts
│ │ ├── lang.ts
│ │ ├── math.ts
│ │ ├── optionsProvider.ts
│ │ └── types.ts
│ ├── event/
│ │ ├── EventEmitter.ts
│ │ └── index.ts
│ ├── index.ts
│ ├── interpolation/
│ │ ├── cardinal.ts
│ │ ├── index.ts
│ │ ├── monotoneCubic.ts
│ │ ├── none.ts
│ │ ├── simple.ts
│ │ └── step.ts
│ ├── styles/
│ │ ├── _settings.scss
│ │ └── index.scss
│ ├── svg/
│ │ ├── Svg.spec.ts
│ │ ├── Svg.ts
│ │ ├── SvgList.ts
│ │ ├── SvgPath.spec.ts
│ │ ├── SvgPath.ts
│ │ ├── animation.ts
│ │ ├── index.ts
│ │ └── types.ts
│ └── utils/
│ ├── extend.ts
│ ├── functional.ts
│ ├── index.ts
│ ├── types.ts
│ └── utils.ts
├── test/
│ ├── mock/
│ │ ├── cssModule.js
│ │ └── dom.ts
│ ├── setup.js
│ ├── storyshots.spec.js
│ └── utils/
│ ├── skipable.js
│ └── storyshots/
│ ├── imageSnapshotWithStoryParameters.js
│ ├── index.js
│ ├── initStoryshots.js
│ ├── storybook.js
│ └── viewport.ts
├── tsconfig.build.json
├── tsconfig.json
└── website/
├── .gitignore
├── CNAME
├── README.md
├── babel.config.js
├── docs/
│ ├── api/
│ │ ├── .gitignore
│ │ ├── basics.md
│ │ └── docs.js
│ ├── docs.js
│ ├── examples/
│ │ ├── bar-chart.mdx
│ │ ├── docs.js
│ │ ├── index.mdx
│ │ ├── line-chart.mdx
│ │ └── pie-chart.mdx
│ ├── index.mdx
│ ├── plugins.md
│ ├── what-is-it-made-for.md
│ └── whats-new-in-v1.md
├── docusaurus.config.js
├── package.json
├── sidebars.js
├── src/
│ ├── components/
│ │ └── ContextProvider.tsx
│ ├── css/
│ │ ├── custom.css
│ │ └── recoloring.css
│ └── prism-theme.js
├── static/
│ └── .nojekyll
└── tsconfig.json
SYMBOL INDEX (318 symbols across 60 files)
FILE: .storybook/preview.js
constant SEED_VALUE (line 5) | const SEED_VALUE = 584;
FILE: sandboxes/bar/bi-polar-interpolated/index.ts
method labelInterpolationFnc (line 13) | labelInterpolationFnc(value, index) {
FILE: sandboxes/line/scatter-random/index.ts
method labelInterpolationFnc (line 28) | labelInterpolationFnc(value, index) {
method labelInterpolationFnc (line 38) | labelInterpolationFnc(value, index) {
FILE: scripts/styles.cjs
function compile (line 16) | async function compile() {
function copySrc (line 48) | async function copySrc() {
FILE: src/axes/AutoScaleAxis.ts
class AutoScaleAxis (line 11) | class AutoScaleAxis extends Axis {
method constructor (line 18) | constructor(
method projectValue (line 43) | projectValue(value: NormalizedSeriesPrimitiveValue) {
FILE: src/axes/Axis.spec.ts
class MockAxis (line 6) | class MockAxis extends Axis {
method projectValue (line 7) | projectValue(value: number) {
method width (line 37) | width() {
method height (line 40) | height() {
FILE: src/axes/Axis.ts
type XAxisUnits (line 32) | type XAxisUnits = typeof axisUnits.x;
type YAxisUnits (line 33) | type YAxisUnits = typeof axisUnits.y;
type AxisUnits (line 34) | type AxisUnits = XAxisUnits | YAxisUnits;
method constructor (line 47) | constructor(
method createGridAndLabels (line 64) | createGridAndLabels(
FILE: src/axes/FixedScaleAxis.ts
class FixedScaleAxis (line 11) | class FixedScaleAxis extends Axis {
method constructor (line 17) | constructor(
method projectValue (line 42) | projectValue(value: NormalizedSeriesPrimitiveValue) {
FILE: src/axes/StepAxis.ts
class StepAxis (line 4) | class StepAxis extends Axis {
method constructor (line 8) | constructor(
method projectValue (line 23) | projectValue(_value: unknown, index: number) {
FILE: src/axes/types.ts
type AxisType (line 5) | type AxisType =
FILE: src/charts/BarChart/BarChart.spec.ts
function createChart (line 20) | function createChart() {
FILE: src/charts/BarChart/BarChart.stories.ts
function Default (line 10) | function Default() {
function BiPolar (line 38) | function BiPolar() {
function Labels (line 61) | function Labels() {
function MultilineLabels (line 76) | function MultilineLabels() {
function LabelsPlacement (line 112) | function LabelsPlacement() {
function MultiSeries (line 139) | function MultiSeries() {
function DistributedSeries (line 157) | function DistributedSeries() {
function ReverseData (line 174) | function ReverseData() {
function Stack (line 194) | function Stack() {
function Horizontal (line 226) | function Horizontal() {
function Adaptive (line 259) | function Adaptive() {
function OverlappingBarsOnMobile (line 337) | function OverlappingBarsOnMobile() {
function PeakCircles (line 389) | function PeakCircles() {
function AccumulateRelativeStack (line 428) | function AccumulateRelativeStack() {
function ViewBox (line 449) | function ViewBox() {
FILE: src/charts/BarChart/BarChart.ts
function getSerialSums (line 36) | function getSerialSums(series: NormalizedSeries[]) {
class BarChart (line 149) | class BarChart extends BaseChart<BarChartEventsTypes> {
method constructor (line 188) | constructor(
method createChart (line 206) | createChart(options: BarChartOptionsWithDefaults) {
FILE: src/charts/BarChart/BarChart.types.ts
type BarChartData (line 13) | type BarChartData = Data;
type BarChartOptions (line 15) | interface BarChartOptions<
type BarChartOptionsWithDefaults (line 69) | type BarChartOptionsWithDefaults = RequiredKeys<
type BarChartCreatedEvent (line 101) | type BarChartCreatedEvent = CreatedEvent<BarChartOptions>;
type BarDrawEvent (line 103) | interface BarDrawEvent extends DrawEvent {
type BarChartEventsTypes (line 112) | type BarChartEventsTypes = BaseChartEventsTypes<
FILE: src/charts/BaseChart.ts
method constructor (line 23) | constructor(
method update (line 67) | update(data?: Data, options?: Options, override = false) {
method detach (line 110) | detach() {
method on (line 137) | on(event: string, listener: any) {
method off (line 154) | off(event: string, listener?: any) {
method initialize (line 159) | initialize() {
FILE: src/charts/LineChart/LineChart.spec.ts
function createChart (line 21) | function createChart() {
FILE: src/charts/LineChart/LineChart.stories.ts
function Default (line 16) | function Default() {
function AutoScale (line 40) | function AutoScale() {
function Labels (line 68) | function Labels() {
function MultiSeries (line 83) | function MultiSeries() {
function Holes (line 101) | function Holes() {
function FilledHoles (line 152) | function FilledHoles() {
function OnlyWholeNumbers (line 206) | function OnlyWholeNumbers() {
function NoInterpolationWithHoles (line 235) | function NoInterpolationWithHoles() {
function CardinalInterpolationWithHoles (line 252) | function CardinalInterpolationWithHoles() {
function MonotoneCubicInterpolationWithHoles (line 269) | function MonotoneCubicInterpolationWithHoles() {
function SimpleInterpolationWithHoles (line 286) | function SimpleInterpolationWithHoles() {
function StepInterpolationWithHoles (line 303) | function StepInterpolationWithHoles() {
function StepNoPostponeInterpolationWithHoles (line 320) | function StepNoPostponeInterpolationWithHoles() {
function SeriesOverrides (line 339) | function SeriesOverrides() {
function ReverseData (line 407) | function ReverseData() {
function FullWidth (line 428) | function FullWidth() {
function Scatter (line 449) | function Scatter() {
function Area (line 497) | function Area() {
function BiPolarArea (line 515) | function BiPolarArea() {
function CustomPoints (line 546) | function CustomPoints() {
function PathAnimation (line 584) | function PathAnimation() {
function ViewBox (line 627) | function ViewBox() {
FILE: src/charts/LineChart/LineChart.ts
function getSeriesOption (line 32) | function getSeriesOption<
class LineChart (line 152) | class LineChart extends BaseChart<LineChartEventsTypes> {
method constructor (line 237) | constructor(
method createChart (line 255) | createChart(options: LineChartOptionsWithDefaults) {
FILE: src/charts/LineChart/LineChart.types.ts
type LineInterpolation (line 18) | type LineInterpolation = (
type LineChartData (line 23) | type LineChartData = Data<(Series | SeriesObject)[]>;
type LineChartOptions (line 25) | interface LineChartOptions<
type LineChartOptionsWithDefaults (line 89) | type LineChartOptionsWithDefaults = RequiredKeys<
type LineChartCreatedEvent (line 121) | type LineChartCreatedEvent = CreatedEvent<LineChartOptions>;
type PointDrawEvent (line 123) | interface PointDrawEvent extends DrawEvent {
type LineDrawEvent (line 130) | interface LineDrawEvent extends DrawEvent {
type AreaDrawEvent (line 136) | interface AreaDrawEvent extends DrawEvent {
type LineChartEventsTypes (line 142) | type LineChartEventsTypes = BaseChartEventsTypes<
FILE: src/charts/PieChart/PieChart.spec.ts
function createChart (line 17) | function createChart() {
FILE: src/charts/PieChart/PieChart.stories.ts
function Default (line 9) | function Default() {
function Labels (line 27) | function Labels() {
function OverlappingLabels (line 42) | function OverlappingLabels() {
function LabelInterpolation (line 59) | function LabelInterpolation() {
function StartAngle (line 77) | function StartAngle() {
function SmallSlices (line 93) | function SmallSlices() {
function IgnoreEmptyValues (line 111) | function IgnoreEmptyValues() {
function Donut (line 127) | function Donut() {
function GaugeDonut (line 143) | function GaugeDonut() {
function RelativeDonutWidth (line 166) | function RelativeDonutWidth() {
function Solid (line 187) | function Solid() {
function ViewBox (line 207) | function ViewBox() {
FILE: src/charts/PieChart/PieChart.ts
function determineAnchorPosition (line 81) | function determineAnchorPosition(
class PieChart (line 103) | class PieChart extends BaseChart<PieChartEventsTypes> {
method constructor (line 179) | constructor(
method moveLabel (line 201) | moveLabel(
method createChart (line 224) | createChart(options: PieChartOptionsWithDefaults) {
FILE: src/charts/PieChart/PieChart.types.ts
type PieChartData (line 14) | type PieChartData = Data<FlatSeries>;
type LabelDirection (line 16) | type LabelDirection = 'implode' | 'neutral' | 'explode';
type AnchorPosition (line 18) | type AnchorPosition = 'start' | 'middle' | 'end';
type RadialLabelPosition (line 20) | type RadialLabelPosition = 'inside' | 'center' | 'outside';
type Dot (line 22) | interface Dot {
type PieChartOptions (line 27) | interface PieChartOptions extends Omit<Options, 'axisX' | 'axisY'> {
type PieChartOptionsWithDefaults (line 91) | type PieChartOptionsWithDefaults = RequiredKeys<
type PieChartCreatedEvent (line 105) | type PieChartCreatedEvent = Omit<
type SliceDrawEvent (line 110) | interface SliceDrawEvent
type SliceLabelDrawEvent (line 122) | interface SliceLabelDrawEvent
type PieChartEventsTypes (line 130) | type PieChartEventsTypes = BaseChartEventsTypes<
FILE: src/charts/types.ts
type BaseChartEventsTypes (line 9) | interface BaseChartEventsTypes<
FILE: src/core/creation.spec.ts
function onCreated (line 106) | function onCreated(fn: any, done: any) {
method width (line 169) | width() {
method height (line 172) | height() {
function onCreated (line 178) | function onCreated(fn: any, done: any) {
FILE: src/core/creation.ts
function createSvg (line 25) | function createSvg(
function normalizePadding (line 73) | function normalizePadding(
function createChartRect (line 99) | function createChartRect(svg: Svg, options: Options) {
function createGrid (line 183) | function createGrid(
function createGridBackground (line 216) | function createGridBackground(
function createLabel (line 245) | function createLabel(
FILE: src/core/data/bounds.ts
function getBounds (line 18) | function getBounds(
FILE: src/core/data/data.ts
function getMetaData (line 13) | function getMetaData(
function isDataHoleValue (line 30) | function isDataHoleValue(value: unknown) {
function isArrayOfSeries (line 41) | function isArrayOfSeries(
function isMultiValue (line 53) | function isMultiValue(value: unknown): value is Multi {
function getMultiValue (line 64) | function getMultiValue(
FILE: src/core/data/highLow.ts
function getHighLow (line 17) | function getHighLow(
FILE: src/core/data/normalize.ts
function normalizeData (line 48) | function normalizeData(
function reverseData (line 93) | function reverseData(data: Data) {
function normalizeMulti (line 105) | function normalizeMulti(
function normalizePrimitive (line 141) | function normalizePrimitive(
function normalizeSingleSeries (line 158) | function normalizeSingleSeries(
function normalizeSeries (line 203) | function normalizeSeries(
FILE: src/core/data/segments.spec.ts
function makeValues (line 6) | function makeValues<T>(arr: T[]) {
FILE: src/core/data/segments.ts
function splitIntoSegments (line 27) | function splitIntoSegments(
FILE: src/core/data/serialize.ts
function serialize (line 11) | function serialize(
function deserialize (line 41) | function deserialize(data: unknown) {
FILE: src/core/lang.ts
function ensureUnit (line 5) | function ensureUnit<T>(value: T, unit: string) {
function quantity (line 17) | function quantity<T>(input: T) {
function alphaNumerate (line 36) | function alphaNumerate(n: number) {
FILE: src/core/math.ts
constant EPSILON (line 4) | const EPSILON = 2.221e-16;
function orderOfMagnitude (line 11) | function orderOfMagnitude(value: number) {
function projectLength (line 22) | function projectLength(
function roundWithPrecision (line 36) | function roundWithPrecision(value: number, digits?: number) {
function rho (line 46) | function rho(num: number) {
function polarToCartesian (line 88) | function polarToCartesian(
FILE: src/core/optionsProvider.ts
type OptionsProvider (line 5) | interface OptionsProvider<T = unknown> {
function optionsProvider (line 17) | function optionsProvider<T = unknown>(
FILE: src/core/types.ts
type ChartPadding (line 5) | interface ChartPadding {
type ChartRect (line 12) | interface ChartRect {
type Plugin (line 23) | type Plugin = (chart: any, options?: any) => void;
type Meta (line 26) | type Meta = any;
type ViewBox (line 28) | interface ViewBox {
type Options (line 33) | interface Options<
type AxisOptions (line 81) | interface AxisOptions {
type OptionsWithDefaults (line 140) | type OptionsWithDefaults = RequiredKeys<
type ResponsiveOptions (line 154) | type ResponsiveOptions<T = Options> = [string, T][];
type Bounds (line 156) | interface Bounds {
type Segment (line 169) | interface Segment {
type SegmentData (line 174) | interface SegmentData {
type AxisName (line 180) | type AxisName = 'x' | 'y';
type Multi (line 182) | type Multi =
type NormalizedMulti (line 194) | type NormalizedMulti =
type Label (line 210) | type Label = string | number | Date;
type AllSeriesTypes (line 212) | type AllSeriesTypes = FlatSeries | (Series | SeriesObject)[];
type Data (line 214) | interface Data<T extends AllSeriesTypes = AllSeriesTypes> {
type Series (line 223) | type Series<T = SeriesPrimitiveValue> = SeriesValue<T>[];
type SeriesObject (line 225) | interface SeriesObject<T = SeriesPrimitiveValue> {
type SeriesValue (line 232) | type SeriesValue<T = SeriesPrimitiveValue> = SeriesObjectValue<T> | T;
type SeriesPrimitiveValue (line 234) | type SeriesPrimitiveValue =
type SeriesObjectValue (line 243) | interface SeriesObjectValue<T = SeriesPrimitiveValue> {
type FlatSeries (line 252) | type FlatSeries<T = FlatSeriesPrimitiveValue> = FlatSeriesValue<T>[];
type FlatSeriesValue (line 254) | type FlatSeriesValue<T = FlatSeriesPrimitiveValue> =
type FlatSeriesPrimitiveValue (line 258) | type FlatSeriesPrimitiveValue = number | string | null | undefined;
type FlatSeriesObjectValue (line 260) | interface FlatSeriesObjectValue<T = FlatSeriesPrimitiveValue> {
type AllNormalizedSeriesTypes (line 271) | type AllNormalizedSeriesTypes =
type NormalizedData (line 275) | interface NormalizedData<
type NormalizedSeries (line 286) | type NormalizedSeries = NormalizedSeriesValue[];
type NormalizedSeriesValue (line 288) | type NormalizedSeriesValue = NormalizedSeriesPrimitiveValue;
type NormalizedSeriesPrimitiveValue (line 290) | type NormalizedSeriesPrimitiveValue =
type NormalizedFlatSeries (line 299) | type NormalizedFlatSeries = number[];
type CreatedEvent (line 305) | interface CreatedEvent<TOptions = Options> {
type DrawEvent (line 313) | interface DrawEvent {
type DataEvent (line 326) | interface DataEvent {
type OptionsChangedEvent (line 331) | interface OptionsChangedEvent<T = Options> {
type GridDrawEvent (line 336) | interface GridDrawEvent
type GridBackgroundDrawEvent (line 349) | interface GridBackgroundDrawEvent {
type LabelDrawEvent (line 355) | interface LabelDrawEvent
type AxesDrawEvent (line 369) | type AxesDrawEvent =
FILE: src/event/EventEmitter.ts
type EventListener (line 2) | type EventListener<T = any> = (data: T) => void;
type AllEventsListener (line 4) | type AllEventsListener<T = any> = (event: string, data: T) => void;
class EventEmitter (line 6) | class EventEmitter {
method on (line 17) | on(event: string, listener: EventListener | AllEventsListener) {
method off (line 40) | off(event: string, listener?: EventListener | AllEventsListener) {
method emit (line 69) | emit<T = any>(event: string, data: T) {
FILE: src/interpolation/cardinal.ts
type CardinalInterpolationOptions (line 6) | interface CardinalInterpolationOptions {
function cardinal (line 33) | function cardinal(options?: CardinalInterpolationOptions) {
FILE: src/interpolation/monotoneCubic.ts
type MonotoneCubicInterpolationOptions (line 6) | interface MonotoneCubicInterpolationOptions {
function monotoneCubic (line 33) | function monotoneCubic(options?: MonotoneCubicInterpolationOptions) {
FILE: src/interpolation/none.ts
type NoneInterpolationOptions (line 5) | interface NoneInterpolationOptions {
function none (line 24) | function none(options?: NoneInterpolationOptions) {
FILE: src/interpolation/simple.ts
type SimpleInteractionOptions (line 4) | interface SimpleInteractionOptions {
function simple (line 31) | function simple(options?: SimpleInteractionOptions) {
FILE: src/interpolation/step.ts
type StepInterpolationOptions (line 4) | interface StepInterpolationOptions {
function step (line 27) | function step(options?: StepInterpolationOptions) {
FILE: src/svg/Svg.ts
class Svg (line 10) | class Svg {
method constructor (line 26) | constructor(
method attr (line 72) | attr(attributes: string | Attributes, ns?: string) {
method elem (line 110) | elem(
method parent (line 123) | parent() {
method root (line 133) | root() {
method querySelector (line 152) | querySelector(selector: string) {
method querySelectorAll (line 162) | querySelectorAll(selector: string) {
method getNode (line 170) | getNode<T extends Element = Element>() {
method foreignObject (line 182) | foreignObject(
method text (line 224) | text(t: string) {
method empty (line 233) | empty() {
method remove (line 245) | remove() {
method replace (line 255) | replace(newElement: Svg) {
method append (line 266) | append(element: Svg, insertFirst = false) {
method classes (line 280) | classes() {
method addClass (line 291) | addClass(names: string) {
method removeClass (line 310) | removeClass(names: string) {
method removeAllClasses (line 327) | removeAllClasses() {
method height (line 336) | height() {
method width (line 344) | width() {
method animate (line 387) | animate(
FILE: src/svg/SvgList.ts
type SvgMethods (line 3) | type SvgMethods = Exclude<
type SvgListMethods (line 16) | type SvgListMethods = {
class SvgList (line 24) | class SvgList implements SvgListMethods {
method constructor (line 30) | constructor(nodeList: ArrayLike<Element>) {
method call (line 36) | private call<T extends SvgMethods>(method: T, args: Parameters<Svg[T]>) {
method attr (line 43) | attr(...args: Parameters<Svg['attr']>) {
method elem (line 47) | elem(...args: Parameters<Svg['elem']>) {
method root (line 51) | root(...args: Parameters<Svg['root']>) {
method getNode (line 55) | getNode(...args: Parameters<Svg['getNode']>) {
method foreignObject (line 59) | foreignObject(...args: Parameters<Svg['foreignObject']>) {
method text (line 63) | text(...args: Parameters<Svg['text']>) {
method empty (line 67) | empty(...args: Parameters<Svg['empty']>) {
method remove (line 71) | remove(...args: Parameters<Svg['remove']>) {
method addClass (line 75) | addClass(...args: Parameters<Svg['addClass']>) {
method removeClass (line 79) | removeClass(...args: Parameters<Svg['removeClass']>) {
method removeAllClasses (line 83) | removeAllClasses(...args: Parameters<Svg['removeAllClasses']>) {
method animate (line 87) | animate(...args: Parameters<Svg['animate']>) {
FILE: src/svg/SvgPath.ts
function element (line 22) | function element(
function forEachParam (line 39) | function forEachParam<T extends PathParams = PathParams>(
class SvgPath (line 64) | class SvgPath {
method join (line 71) | static join(paths: SvgPath[], close = false, options?: SvgPathOptions) {
method constructor (line 91) | constructor(private readonly close = false, options?: SvgPathOptions) {
method position (line 102) | position(pos?: number) {
method remove (line 116) | remove(count: number) {
method move (line 129) | move(x: number, y: number, relative = false, data?: SegmentData) {
method line (line 152) | line(x: number, y: number, relative = false, data?: SegmentData) {
method curve (line 179) | curve(
method arc (line 220) | arc(
method parse (line 255) | parse(path: string) {
method stringify (line 304) | stringify() {
method scale (line 330) | scale(x: number, y: number) {
method translate (line 343) | translate(x: number, y: number) {
method transform (line 360) | transform(
method clone (line 391) | clone(close = false) {
method splitByCommand (line 405) | splitByCommand(command: string) {
FILE: src/svg/animation.ts
function createAnimation (line 39) | function createAnimation(
FILE: src/svg/types.ts
type BasePathParams (line 5) | interface BasePathParams {
type MoveParams (line 10) | type MoveParams = BasePathParams;
type LineParams (line 12) | type LineParams = BasePathParams;
type CurveParams (line 14) | interface CurveParams extends BasePathParams {
type ArcParams (line 21) | interface ArcParams extends BasePathParams {
type PathParams (line 29) | type PathParams = MoveParams | LineParams | CurveParams | ArcParams;
type PathCommand (line 31) | type PathCommand<T extends PathParams = PathParams> = {
type SvgPathOptions (line 36) | interface SvgPathOptions {
type Attributes (line 40) | type Attributes = Record<string, number | string | undefined | null>;
type AnimationDefinition (line 42) | interface AnimationDefinition {
type AnimationEvent (line 61) | interface AnimationEvent {
FILE: src/utils/extend.ts
function extend (line 11) | function extend(target: any = {}, ...sources: any[]) {
FILE: src/utils/functional.ts
function times (line 16) | function times<T = unknown>(
FILE: src/utils/types.ts
type FilterByKey (line 1) | type FilterByKey<T, K extends string> = T extends Record<K, unknown>
type RequiredKeys (line 7) | type RequiredKeys<T, K extends keyof T, V extends keyof T = never> = T &
FILE: src/utils/utils.ts
function safeHasProperty (line 13) | function safeHasProperty(target: unknown, property: string) {
function isNumeric (line 26) | function isNumeric(value: unknown) {
function isFalseyButZero (line 33) | function isFalseyButZero(
function getNumberOrUndefined (line 44) | function getNumberOrUndefined(value: unknown) {
function isArrayOfArrays (line 51) | function isArrayOfArrays(data: unknown): data is unknown[][] {
function each (line 62) | function each<T>(
FILE: test/mock/cssModule.js
method get (line 4) | get() {
FILE: test/mock/dom.ts
type Fixture (line 1) | type Fixture = ReturnType<typeof addMockWrapper>;
function mockDom (line 7) | function mockDom() {
function destroyMockDom (line 15) | function destroyMockDom() {
function addMockWrapper (line 22) | function addMockWrapper(fixture: string) {
function mockDomRects (line 33) | function mockDomRects() {
function destroyMockDomRects (line 58) | function destroyMockDomRects() {
FILE: test/storyshots.spec.js
method getGotoOptions (line 9) | getGotoOptions() {
FILE: test/utils/skipable.js
function skipable (line 7) | function skipable(fn, skip) {
FILE: test/utils/storyshots/imageSnapshotWithStoryParameters.js
function beforeScreenshotHook (line 15) | async function beforeScreenshotHook(page, options) {
function getCaptureRootScreenshotOptions (line 44) | function getCaptureRootScreenshotOptions() {
function imageSnapshotWithStoryParameters (line 56) | function imageSnapshotWithStoryParameters(config) {
FILE: test/utils/storyshots/initStoryshots.js
function defaultCustomizePage (line 11) | function defaultCustomizePage(page) {
function sanitizeSnapshotIdentifierPart (line 23) | function sanitizeSnapshotIdentifierPart(indentifierPart) {
function defaultGetMatchOptions (line 36) | function defaultGetMatchOptions({
function initStoryshots (line 57) | function initStoryshots(config) {
FILE: test/utils/storyshots/storybook.js
constant STORYBOOK_STATIC (line 6) | const STORYBOOK_STATIC = 'storybook-static';
function buildStorybook (line 16) | async function buildStorybook({ env = {}, verbose = false }) {
function startStorybook (line 57) | function startStorybook(options) {
FILE: website/src/components/ContextProvider.tsx
type IContext (line 5) | interface IContext {
function ContextProvider (line 10) | function ContextProvider({
Condensed preview — 281 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (515K chars).
[
{
"path": ".browserslistrc",
"chars": 33,
"preview": "defaults\nnot ie 11\nnot ie_mob 11\n"
},
{
"path": ".clean-publish",
"chars": 53,
"preview": "{\n \"withoutPublish\": true,\n \"tempDir\": \"package\"\n}\n"
},
{
"path": ".commitlintrc.json",
"chars": 103,
"preview": "{\n \"extends\": [\"@commitlint/config-conventional\"],\n \"rules\": {\n \"body-max-line-length\": [0]\n }\n}\n"
},
{
"path": ".czrc",
"chars": 42,
"preview": "{\n \"path\": \"@commitlint/cz-commitlint\"\n}\n"
},
{
"path": ".editorconfig",
"chars": 415,
"preview": "# EditorConfig helps developers define and maintain consistent\n# coding styles between different editors and IDEs\n# edit"
},
{
"path": ".eslintrc.json",
"chars": 1582,
"preview": "{\n \"extends\": [\"eslint:recommended\", \"plugin:prettier/recommended\"],\n \"parser\": \"@babel/eslint-parser\",\n \"parserOptio"
},
{
"path": ".gitattributes",
"chars": 12,
"preview": "* text=auto\n"
},
{
"path": ".github/FUNDING.yml",
"chars": 64,
"preview": "# These are supported funding model platforms\n\ngithub: gionkunz\n"
},
{
"path": ".github/ISSUE_TEMPLATE/bug-report.yml",
"chars": 1349,
"preview": "name: \"🐛 Bug Report\"\ndescription: \"If something isn't working as expected.\"\ntitle: \"[Bug]: \"\nlabels: [\"bug\"]\nbody:\n - t"
},
{
"path": ".github/ISSUE_TEMPLATE/config.yml",
"chars": 193,
"preview": "blank_issues_enabled: false\ncontact_links:\n - name: 🤔 Have a Question?\n url: https://stackoverflow.com/questions/tag"
},
{
"path": ".github/ISSUE_TEMPLATE/feature-request.yml",
"chars": 1191,
"preview": "name: \"🚀 Feature Request\"\ndescription: \"I have a specific suggestion!\"\nlabels: [\"enhancement\"]\nbody:\n - type: markdown\n"
},
{
"path": ".github/renovate.json",
"chars": 70,
"preview": "{\n \"extends\": [\n \"config:base\",\n \":preserveSemverRanges\"\n ]\n}\n"
},
{
"path": ".github/workflows/checks.yml",
"chars": 1833,
"preview": "name: Checks\non:\n pull_request:\n branches:\n - main\njobs:\n size:\n runs-on: ubuntu-latest\n name: size-limi"
},
{
"path": ".github/workflows/ci.yml",
"chars": 1092,
"preview": "name: CI\non:\n pull_request:\n push:\n branches:\n - main\njobs:\n test:\n runs-on: ubuntu-latest\n strategy:\n "
},
{
"path": ".github/workflows/commit.yml",
"chars": 293,
"preview": "name: Commit\non:\n push:\njobs:\n commitlint:\n runs-on: ubuntu-latest\n name: commitlint\n steps:\n - name: Ch"
},
{
"path": ".github/workflows/release.yml",
"chars": 1752,
"preview": "name: Release\non:\n issue_comment:\n types: [created, deleted]\n push:\n branches:\n - main\njobs:\n check:\n r"
},
{
"path": ".github/workflows/update-storyshots.yml",
"chars": 746,
"preview": "name: Update storyshots\non: workflow_dispatch\njobs:\n update-storyshots:\n runs-on: ubuntu-latest\n name: storyshots"
},
{
"path": ".github/workflows/website.yml",
"chars": 1195,
"preview": "name: Website\non:\n push:\n branches:\n - main\n# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHu"
},
{
"path": ".gitignore",
"chars": 198,
"preview": "# See https://help.github.com/ignore-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n\n# builds\npackag"
},
{
"path": ".nano-staged.json",
"chars": 53,
"preview": "{\n \"**/*.{js,ts}\": [\"prettier --write\", \"eslint\"]\n}\n"
},
{
"path": ".npmrc",
"chars": 31,
"preview": "strict-peer-dependencies=false\n"
},
{
"path": ".nvmrc",
"chars": 6,
"preview": "lts/*\n"
},
{
"path": ".prettierrc",
"chars": 164,
"preview": "{\n \"singleQuote\": true,\n \"jsxSingleQuote\": true,\n \"semi\": true,\n \"tabWidth\": 2,\n \"bracketSpacing\": true,\n \"arrowPa"
},
{
"path": ".simple-git-hooks.json",
"chars": 115,
"preview": "{\n \"commit-msg\": \"pnpm commitlint --edit \\\"$1\\\"\",\n \"pre-commit\": \"pnpm nano-staged\",\n \"pre-push\": \"pnpm test\"\n}\n"
},
{
"path": ".simple-release.json",
"chars": 52,
"preview": "{\n \"project\": \"@simple-release/pnpm#PnpmProject\"\n}\n"
},
{
"path": ".size-limit.json",
"chars": 503,
"preview": "[\n {\n \"path\": \"dist/index.cjs\",\n \"limit\": \"36.76 kB\",\n \"webpack\": false,\n \"running\": false\n },\n {\n \"pa"
},
{
"path": ".storybook/main.js",
"chars": 803,
"preview": "const path = require('path');\n\nmodule.exports = {\n stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],\n addons: [\n '"
},
{
"path": ".storybook/manager.js",
"chars": 136,
"preview": "import { addons } from '@storybook/addons';\n\nimport { theme } from './theme';\n\naddons.setConfig({\n theme,\n panelPositi"
},
{
"path": ".storybook/package.json",
"chars": 25,
"preview": "{\n \"type\": \"commonjs\"\n}\n"
},
{
"path": ".storybook/preview.js",
"chars": 400,
"preview": "import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';\nimport { configureActions } from '@storybook/addon-action"
},
{
"path": ".storybook/theme.js",
"chars": 177,
"preview": "import { create } from '@storybook/theming';\n\nexport const theme = create({\n base: 'light',\n brandTitle: 'chartist',\n "
},
{
"path": ".tool-versions",
"chars": 27,
"preview": "pnpm 7.33.7\nnodejs 18.18.0\n"
},
{
"path": "CHANGELOG.md",
"chars": 19138,
"preview": "# Changelog\n\nAll notable changes to this project will be documented in this file. See [standard-version](https://github."
},
{
"path": "CONTRIBUTING.md",
"chars": 987,
"preview": "# Contributing to Chartist\n\n- [Issues and Bugs](#issue)\n- [Submission Guidelines](#submit)\n\n## <a name=\"issue\"></a> Foun"
},
{
"path": "LICENSE-MIT",
"chars": 1075,
"preview": "Copyright (c) 2013 Gion Kunz <gion.kunz@gmail.com>\n\nPermission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "LICENSE-WTFPL",
"chars": 478,
"preview": " DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE\n Version 2, December 2004\n\nCopyright (C) 2004"
},
{
"path": "README.md",
"chars": 5104,
"preview": "# Big welcome by the Chartist Guy\n\n[![NPM version][npm]][npm-url]\n[![Downloads][downloads]][downloads-url]\n[![Build stat"
},
{
"path": "jest.config.json",
"chars": 612,
"preview": "{\n \"testEnvironment\": \"jsdom\",\n \"testRegex\": \"(test|src)/.*\\\\.spec\\\\.(jsx?|tsx?)$\",\n \"setupFilesAfterEnv\": [\"<rootDir"
},
{
"path": "package.json",
"chars": 4467,
"preview": "{\n \"name\": \"chartist\",\n \"type\": \"module\",\n \"version\": \"1.5.0\",\n \"description\": \"Simple, responsive charts\",\n \"autho"
},
{
"path": "pnpm-workspace.yaml",
"chars": 24,
"preview": "packages:\n - 'website'\n"
},
{
"path": "postcss.config.cjs",
"chars": 222,
"preview": "const isProd = process.env.NODE_ENV !== 'development';\n\nmodule.exports = {\n plugins: [\n require('postcss-preset-env'"
},
{
"path": "rollup.config.js",
"chars": 1365,
"preview": "import swc from 'rollup-plugin-swc';\nimport { nodeResolve } from '@rollup/plugin-node-resolve';\nimport { terser } from '"
},
{
"path": "sandboxes/bar/bi-polar-interpolated/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/bar/bi-polar-interpolated/index.ts",
"chars": 439,
"preview": "import 'chartist/dist/index.css';\nimport { BarChart, BarChartOptions } from 'chartist';\n\nconst data = {\n labels: ['W1',"
},
{
"path": "sandboxes/bar/bi-polar-interpolated/package.json",
"chars": 153,
"preview": "{\n \"name\": \"bar-bi-polar-interpolated\",\n \"description\": \"Bi-polar bar chart\",\n \"main\": \"index.ts\",\n \"dependencies\": "
},
{
"path": "sandboxes/bar/bi-polar-interpolated/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/bar/distributed-series/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/bar/distributed-series/index.ts",
"chars": 245,
"preview": "import 'chartist/dist/index.css';\nimport { BarChart } from 'chartist';\n\nnew BarChart(\n '#chart',\n {\n labels: ['XS',"
},
{
"path": "sandboxes/bar/distributed-series/package.json",
"chars": 150,
"preview": "{\n \"name\": \"bar-distributed-series\",\n \"description\": \"Distributed series\",\n \"main\": \"index.ts\",\n \"dependencies\": {\n "
},
{
"path": "sandboxes/bar/distributed-series/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/bar/extreme-responsive/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/bar/extreme-responsive/index.ts",
"chars": 1214,
"preview": "import 'chartist/dist/index.css';\nimport { BarChart, noop } from 'chartist';\n\nnew BarChart(\n '#chart',\n {\n labels: "
},
{
"path": "sandboxes/bar/extreme-responsive/package.json",
"chars": 164,
"preview": "{\n \"name\": \"bar-extreme-responsive\",\n \"description\": \"Extreme responsive configuration\",\n \"main\": \"index.ts\",\n \"depe"
},
{
"path": "sandboxes/bar/extreme-responsive/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/bar/horizontal/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/bar/horizontal/index.ts",
"chars": 448,
"preview": "import 'chartist/dist/index.css';\nimport { BarChart } from 'chartist';\n\nnew BarChart(\n '#chart',\n {\n labels: [\n "
},
{
"path": "sandboxes/bar/horizontal/package.json",
"chars": 144,
"preview": "{\n \"name\": \"bar-horizontal\",\n \"description\": \"Horizontal bar chart\",\n \"main\": \"index.ts\",\n \"dependencies\": {\n \"ch"
},
{
"path": "sandboxes/bar/horizontal/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/bar/label-position/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/bar/label-position/index.ts",
"chars": 464,
"preview": "import 'chartist/dist/index.css';\nimport { BarChart } from 'chartist';\n\nnew BarChart(\n '#chart',\n {\n labels: ['Mon'"
},
{
"path": "sandboxes/bar/label-position/package.json",
"chars": 143,
"preview": "{\n \"name\": \"bar-label-position\",\n \"description\": \"Label placement\",\n \"main\": \"index.ts\",\n \"dependencies\": {\n \"cha"
},
{
"path": "sandboxes/bar/label-position/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/bar/multiline/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/bar/multiline/index.ts",
"chars": 583,
"preview": "import 'chartist/dist/index.css';\nimport { BarChart } from 'chartist';\n\nnew BarChart(\n '#chart',\n {\n labels: [\n "
},
{
"path": "sandboxes/bar/multiline/package.json",
"chars": 140,
"preview": "{\n \"name\": \"bar-multiline\",\n \"description\": \"Multi-line labels\",\n \"main\": \"index.ts\",\n \"dependencies\": {\n \"charti"
},
{
"path": "sandboxes/bar/multiline/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/bar/overlapping-bars/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/bar/overlapping-bars/index.ts",
"chars": 893,
"preview": "import 'chartist/dist/index.css';\nimport { BarChart, BarChartOptions, ResponsiveOptions } from 'chartist';\n\nconst data ="
},
{
"path": "sandboxes/bar/overlapping-bars/package.json",
"chars": 156,
"preview": "{\n \"name\": \"bar-overlapping-bars\",\n \"description\": \"Overlapping bars on mobile\",\n \"main\": \"index.ts\",\n \"dependencies"
},
{
"path": "sandboxes/bar/overlapping-bars/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/bar/stacked/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/bar/stacked/index.ts",
"chars": 519,
"preview": "import 'chartist/dist/index.css';\nimport { BarChart } from 'chartist';\n\nnew BarChart(\n '#chart',\n {\n labels: ['Q1',"
},
{
"path": "sandboxes/bar/stacked/package.json",
"chars": 138,
"preview": "{\n \"name\": \"bar-stacked\",\n \"description\": \"Stacked bar chart\",\n \"main\": \"index.ts\",\n \"dependencies\": {\n \"chartist"
},
{
"path": "sandboxes/bar/stacked/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/bar/stacked-accumulate-relative/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/bar/stacked-accumulate-relative/index.ts",
"chars": 299,
"preview": "import 'chartist/dist/index.css';\nimport { BarChart } from 'chartist';\n\nnew BarChart(\n '#chart',\n {\n labels: ['Mond"
},
{
"path": "sandboxes/bar/stacked-accumulate-relative/package.json",
"chars": 174,
"preview": "{\n \"name\": \"bar-stacked\",\n \"description\": \"Stacked bar chart with accumulate-relative stack mode\",\n \"main\": \"index.ts"
},
{
"path": "sandboxes/bar/stacked-accumulate-relative/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/bar/with-circle-modify-drawing/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/bar/with-circle-modify-drawing/index.ts",
"chars": 1025,
"preview": "import 'chartist/dist/index.css';\nimport { BarChart, Svg, getMultiValue } from 'chartist';\n\n// Create a simple bi-polar "
},
{
"path": "sandboxes/bar/with-circle-modify-drawing/package.json",
"chars": 178,
"preview": "{\n \"name\": \"bar-with-circle-modify-drawing\",\n \"description\": \"Add peak circles using the draw events\",\n \"main\": \"inde"
},
{
"path": "sandboxes/bar/with-circle-modify-drawing/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/line/area/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/line/area/index.ts",
"chars": 228,
"preview": "import 'chartist/dist/index.css';\nimport { LineChart } from 'chartist';\n\nnew LineChart(\n '#chart',\n {\n labels: [1, "
},
{
"path": "sandboxes/line/area/package.json",
"chars": 139,
"preview": "{\n \"name\": \"line-area\",\n \"description\": \"Line chart with area\",\n \"main\": \"index.ts\",\n \"dependencies\": {\n \"chartis"
},
{
"path": "sandboxes/line/area/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/line/axis-auto/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/line/axis-auto/index.ts",
"chars": 370,
"preview": "import 'chartist/dist/index.css';\nimport { LineChart, AutoScaleAxis } from 'chartist';\n\nnew LineChart(\n '#chart',\n {\n "
},
{
"path": "sandboxes/line/axis-auto/package.json",
"chars": 139,
"preview": "{\n \"name\": \"line-axis-auto\",\n \"description\": \"Auto scale axis\",\n \"main\": \"index.ts\",\n \"dependencies\": {\n \"chartis"
},
{
"path": "sandboxes/line/axis-auto/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/line/axis-fixed-and-auto/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/line/axis-fixed-and-auto/index.ts",
"chars": 567,
"preview": "import 'chartist/dist/index.css';\nimport {\n LineChart,\n AutoScaleAxis,\n FixedScaleAxis,\n Interpolation\n} from 'chart"
},
{
"path": "sandboxes/line/axis-fixed-and-auto/package.json",
"chars": 159,
"preview": "{\n \"name\": \"line-axis-fixed-and-auto\",\n \"description\": \"Fixed and auto scale axis\",\n \"main\": \"index.ts\",\n \"dependenc"
},
{
"path": "sandboxes/line/axis-fixed-and-auto/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/line/bipolar-area/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/line/bipolar-area/index.ts",
"chars": 503,
"preview": "import 'chartist/dist/index.css';\nimport { LineChart } from 'chartist';\n\nnew LineChart(\n '#chart',\n {\n labels: [1, "
},
{
"path": "sandboxes/line/bipolar-area/package.json",
"chars": 161,
"preview": "{\n \"name\": \"line-bipolar-area\",\n \"description\": \"Bi-polar Line chart with area only\",\n \"main\": \"index.ts\",\n \"depende"
},
{
"path": "sandboxes/line/bipolar-area/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/line/data-fill-holes/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/line/data-fill-holes/index.ts",
"chars": 933,
"preview": "import 'chartist/dist/index.css';\nimport { LineChart, Interpolation } from 'chartist';\n\nnew LineChart(\n '#chart',\n {\n "
},
{
"path": "sandboxes/line/data-fill-holes/package.json",
"chars": 150,
"preview": "{\n \"name\": \"line-data-fill-holes\",\n \"description\": \"Filled holes in data\",\n \"main\": \"index.ts\",\n \"dependencies\": {\n "
},
{
"path": "sandboxes/line/data-fill-holes/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/line/data-holes/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/line/data-holes/index.ts",
"chars": 847,
"preview": "import 'chartist/dist/index.css';\nimport { LineChart } from 'chartist';\n\nnew LineChart(\n '#chart',\n {\n labels: [1, "
},
{
"path": "sandboxes/line/data-holes/package.json",
"chars": 138,
"preview": "{\n \"name\": \"line-data-holes\",\n \"description\": \"Holes in data\",\n \"main\": \"index.ts\",\n \"dependencies\": {\n \"chartist"
},
{
"path": "sandboxes/line/data-holes/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/line/modify-drawing/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/line/modify-drawing/index.ts",
"chars": 1009,
"preview": "import 'chartist/dist/index.css';\nimport { LineChart, Svg } from 'chartist';\n\nconst chart = new LineChart('#chart', {\n "
},
{
"path": "sandboxes/line/modify-drawing/package.json",
"chars": 161,
"preview": "{\n \"name\": \"line-modify-drawing\",\n \"description\": \"Using events to replace graphics\",\n \"main\": \"index.ts\",\n \"depende"
},
{
"path": "sandboxes/line/modify-drawing/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/line/only-integer/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/line/only-integer/index.ts",
"chars": 531,
"preview": "import 'chartist/dist/index.css';\nimport { LineChart } from 'chartist';\n\nnew LineChart(\n '#chart',\n {\n labels: [1, "
},
{
"path": "sandboxes/line/only-integer/package.json",
"chars": 145,
"preview": "{\n \"name\": \"line-only-integer\",\n \"description\": \"Only whole numbers\",\n \"main\": \"index.ts\",\n \"dependencies\": {\n \"c"
},
{
"path": "sandboxes/line/only-integer/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/line/path-animation/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/line/path-animation/index.ts",
"chars": 788,
"preview": "import 'chartist/dist/index.css';\nimport { LineChart, easings } from 'chartist';\n\nconst chart = new LineChart(\n '#chart"
},
{
"path": "sandboxes/line/path-animation/package.json",
"chars": 147,
"preview": "{\n \"name\": \"line-path-animation\",\n \"description\": \"SVG Path animation\",\n \"main\": \"index.ts\",\n \"dependencies\": {\n "
},
{
"path": "sandboxes/line/path-animation/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/line/scatter-random/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/line/scatter-random/index.ts",
"chars": 809,
"preview": "import 'chartist/dist/index.css';\nimport { LineChart, times } from 'chartist';\n\nconst data = times(52).reduce<{\n labels"
},
{
"path": "sandboxes/line/scatter-random/package.json",
"chars": 174,
"preview": "{\n \"name\": \"line-scatter-random\",\n \"description\": \"Line scatter diagram with responsive settings\",\n \"main\": \"index.ts"
},
{
"path": "sandboxes/line/scatter-random/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/line/series-override/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/line/series-override/index.ts",
"chars": 1455,
"preview": "import 'chartist/dist/index.css';\nimport { LineChart, Interpolation } from 'chartist';\n\nnew LineChart(\n '#chart',\n {\n "
},
{
"path": "sandboxes/line/series-override/package.json",
"chars": 146,
"preview": "{\n \"name\": \"line-series-override\",\n \"description\": \"Series Overrides\",\n \"main\": \"index.ts\",\n \"dependencies\": {\n \""
},
{
"path": "sandboxes/line/series-override/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/line/simple/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/line/simple/index.ts",
"chars": 344,
"preview": "import 'chartist/dist/index.css';\nimport { LineChart } from 'chartist';\n\nnew LineChart(\n '#chart',\n {\n labels: ['Mo"
},
{
"path": "sandboxes/line/simple/package.json",
"chars": 138,
"preview": "{\n \"name\": \"line-simple\",\n \"description\": \"Simple line chart\",\n \"main\": \"index.ts\",\n \"dependencies\": {\n \"chartist"
},
{
"path": "sandboxes/line/simple/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/line/simple-responsive/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/line/simple-responsive/index.ts",
"chars": 1368,
"preview": "import 'chartist/dist/index.css';\nimport { LineChart, LineChartOptions, ResponsiveOptions } from 'chartist';\n\n/* Add a b"
},
{
"path": "sandboxes/line/simple-responsive/package.json",
"chars": 157,
"preview": "{\n \"name\": \"line-simple-responsive\",\n \"description\": \"Simple responsive options\",\n \"main\": \"index.ts\",\n \"dependencie"
},
{
"path": "sandboxes/line/simple-responsive/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/line/simple-smoothing/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/line/simple-smoothing/index.ts",
"chars": 552,
"preview": "import 'chartist/dist/index.css';\nimport { LineChart, Interpolation } from 'chartist';\n\nnew LineChart(\n '#chart',\n {\n "
},
{
"path": "sandboxes/line/simple-smoothing/package.json",
"chars": 161,
"preview": "{\n \"name\": \"line-simple-smoothing\",\n \"description\": \"Line Interpolation / Smoothing\",\n \"main\": \"index.ts\",\n \"depende"
},
{
"path": "sandboxes/line/simple-smoothing/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/line/simple-svg-animation/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/line/simple-svg-animation/index.ts",
"chars": 1778,
"preview": "import 'chartist/dist/index.css';\nimport { LineChart, easings } from 'chartist';\n\nconst chart = new LineChart(\n '#chart"
},
{
"path": "sandboxes/line/simple-svg-animation/package.json",
"chars": 157,
"preview": "{\n \"name\": \"line-simple-svg-animation\",\n \"description\": \"Simple SMIL Animations\",\n \"main\": \"index.ts\",\n \"dependencie"
},
{
"path": "sandboxes/line/simple-svg-animation/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/line/svg-animation/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/line/svg-animation/index.ts",
"chars": 3693,
"preview": "import 'chartist/dist/index.css';\nimport { LineChart } from 'chartist';\n\nconst chart = new LineChart(\n '#chart',\n {\n "
},
{
"path": "sandboxes/line/svg-animation/package.json",
"chars": 152,
"preview": "{\n \"name\": \"line-svg-animation\",\n \"description\": \"Advanced SMIL Animations\",\n \"main\": \"index.ts\",\n \"dependencies\": {"
},
{
"path": "sandboxes/line/svg-animation/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/line/timeseries/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/line/timeseries/index.ts",
"chars": 1132,
"preview": "import 'chartist/dist/index.css';\nimport { LineChart, FixedScaleAxis } from 'chartist';\n\nnew LineChart(\n '#chart',\n {\n"
},
{
"path": "sandboxes/line/timeseries/package.json",
"chars": 135,
"preview": "{\n \"name\": \"line-timeseries\",\n \"description\": \"Timeseries\",\n \"main\": \"index.ts\",\n \"dependencies\": {\n \"chartist\": "
},
{
"path": "sandboxes/line/timeseries/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/pie/custom-labels/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/pie/custom-labels/index.ts",
"chars": 696,
"preview": "import 'chartist/dist/index.css';\nimport { PieChart, PieChartOptions, ResponsiveOptions } from 'chartist';\n\nconst data ="
},
{
"path": "sandboxes/pie/custom-labels/package.json",
"chars": 155,
"preview": "{\n \"name\": \"pie-custom-labels\",\n \"description\": \"Pie chart with custom labels\",\n \"main\": \"index.ts\",\n \"dependencies\""
},
{
"path": "sandboxes/pie/custom-labels/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/pie/donut-animation/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/pie/donut-animation/index.ts",
"chars": 2061,
"preview": "import 'chartist/dist/index.css';\nimport { PieChart, easings, AnimationDefinition } from 'chartist';\n\nconst chart = new "
},
{
"path": "sandboxes/pie/donut-animation/package.json",
"chars": 163,
"preview": "{\n \"name\": \"pie-donut-animation\",\n \"description\": \"Animating a Donut with Svg.animate\",\n \"main\": \"index.ts\",\n \"depen"
},
{
"path": "sandboxes/pie/donut-animation/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/pie/donut-chart/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/pie/donut-chart/index.ts",
"chars": 225,
"preview": "import 'chartist/dist/index.css';\nimport { PieChart } from 'chartist';\n\nnew PieChart(\n '#chart',\n {\n series: [20, 1"
},
{
"path": "sandboxes/pie/donut-chart/package.json",
"chars": 136,
"preview": "{\n \"name\": \"pie-donut-chart\",\n \"description\": \"Donut chart\",\n \"main\": \"index.ts\",\n \"dependencies\": {\n \"chartist\":"
},
{
"path": "sandboxes/pie/donut-chart/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/pie/simple/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/pie/simple/index.ts",
"chars": 255,
"preview": "import 'chartist/dist/index.css';\nimport { PieChart } from 'chartist';\n\nconst data = {\n series: [5, 3, 4]\n};\n\nnew PieCh"
},
{
"path": "sandboxes/pie/simple/package.json",
"chars": 136,
"preview": "{\n \"name\": \"pie-simple\",\n \"description\": \"Simple pie chart\",\n \"main\": \"index.ts\",\n \"dependencies\": {\n \"chartist\":"
},
{
"path": "sandboxes/pie/simple/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/pie/simple-gauge/index.html",
"chars": 162,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <script defer src=\"./index.ts\"></script>\n </head>\n <body>\n <div id=\"chart\" styl"
},
{
"path": "sandboxes/pie/simple-gauge/index.ts",
"chars": 242,
"preview": "import 'chartist/dist/index.css';\nimport { PieChart } from 'chartist';\n\nnew PieChart(\n '#chart',\n {\n series: [20, 1"
},
{
"path": "sandboxes/pie/simple-gauge/package.json",
"chars": 137,
"preview": "{\n \"name\": \"pie-simple-gauge\",\n \"description\": \"Gauge chart\",\n \"main\": \"index.ts\",\n \"dependencies\": {\n \"chartist\""
},
{
"path": "sandboxes/pie/simple-gauge/sandbox.config.json",
"chars": 112,
"preview": "{\n \"infiniteLoopProtection\": true,\n \"hardReloadOnChange\": true,\n \"view\": \"browser\",\n \"template\": \"parcel\"\n}\n"
},
{
"path": "sandboxes/tsconfig.json",
"chars": 154,
"preview": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"chartist\": [\"../src\""
},
{
"path": "scripts/styles.cjs",
"chars": 1346,
"preview": "#!/usr/bin/env node\n\nconst fs = require('fs').promises;\nconst path = require('path');\nconst sass = require('sass');\ncons"
},
{
"path": "src/axes/AutoScaleAxis.ts",
"chars": 1290,
"preview": "import type {\n ChartRect,\n AxisOptions,\n Bounds,\n NormalizedSeries,\n NormalizedSeriesPrimitiveValue\n} from '../core"
},
{
"path": "src/axes/Axis.spec.ts",
"chars": 3413,
"preview": "import type { ChartRect } from '../core';\nimport { Svg } from '../svg';\nimport { EventEmitter } from '../event';\nimport "
},
{
"path": "src/axes/Axis.ts",
"chars": 5360,
"preview": "import type {\n Label,\n ChartRect,\n OptionsWithDefaults,\n NormalizedSeriesPrimitiveValue,\n NormalizedSeries\n} from '"
},
{
"path": "src/axes/FixedScaleAxis.spec.ts",
"chars": 1168,
"preview": "import { FixedScaleAxis } from './FixedScaleAxis';\n\ndescribe('Axes', () => {\n describe('FixedScaleAxis', () => {\n it"
},
{
"path": "src/axes/FixedScaleAxis.ts",
"chars": 1217,
"preview": "import type {\n ChartRect,\n AxisOptions,\n NormalizedSeries,\n NormalizedSeriesPrimitiveValue\n} from '../core';\nimport "
},
{
"path": "src/axes/StepAxis.spec.ts",
"chars": 685,
"preview": "import { StepAxis } from './StepAxis';\n\ndescribe('Axes', () => {\n describe('StepAxis', () => {\n it('should return 0 "
},
{
"path": "src/axes/StepAxis.ts",
"chars": 667,
"preview": "import type { ChartRect, AxisOptions } from '../core';\nimport { AxisUnits, Axis } from './Axis';\n\nexport class StepAxis "
},
{
"path": "src/axes/index.ts",
"chars": 144,
"preview": "export * from './Axis';\nexport * from './AutoScaleAxis';\nexport * from './FixedScaleAxis';\nexport * from './StepAxis';\ne"
},
{
"path": "src/axes/types.ts",
"chars": 250,
"preview": "import type { AutoScaleAxis } from './AutoScaleAxis';\nimport type { FixedScaleAxis } from './FixedScaleAxis';\nimport typ"
},
{
"path": "src/charts/BarChart/BarChart.spec.ts",
"chars": 11442,
"preview": "import { AutoScaleAxis } from '../../axes';\nimport { BarChartOptions, BarChartData, BarChart } from '.';\nimport { namesp"
},
{
"path": "src/charts/BarChart/BarChart.stories.ts",
"chars": 8850,
"preview": "import 'chartist-dev/styles';\nimport { BarChart, AutoScaleAxis, Svg, getMultiValue } from 'chartist-dev';\nimport { Viewp"
},
{
"path": "src/charts/BarChart/BarChart.ts",
"chars": 22261,
"preview": "import type { Axis } from '../../axes';\nimport type {\n BarChartData,\n BarChartOptions,\n BarChartOptionsWithDefaults,\n"
},
{
"path": "src/charts/BarChart/BarChart.types.ts",
"chars": 3342,
"preview": "import type {\n Options,\n AxisOptions,\n Data,\n CreatedEvent,\n DrawEvent,\n NormalizedMulti,\n AxesDrawEvent\n} from '"
},
{
"path": "src/charts/BarChart/index.ts",
"chars": 62,
"preview": "export * from './BarChart';\nexport * from './BarChart.types';\n"
},
{
"path": "src/charts/BaseChart.ts",
"chars": 8560,
"preview": "import type { Data, Options, DataEvent, ResponsiveOptions } from '../core';\nimport type { Svg } from '../svg';\nimport ty"
},
{
"path": "src/charts/LineChart/LineChart.spec.ts",
"chars": 27998,
"preview": "import { AutoScaleAxis, FixedScaleAxis } from '../../axes';\nimport { LineChartOptions, LineChartData, LineChart } from '"
},
{
"path": "src/charts/LineChart/LineChart.stories.ts",
"chars": 12509,
"preview": "import 'chartist-dev/styles';\nimport faker from 'faker';\nimport {\n LineChart,\n AutoScaleAxis,\n Interpolation,\n Svg,\n"
},
{
"path": "src/charts/LineChart/LineChart.ts",
"chars": 20370,
"preview": "import type { Axis } from '../../axes';\nimport type {\n LineChartData,\n LineChartOptions,\n LineChartOptionsWithDefault"
},
{
"path": "src/charts/LineChart/LineChart.types.ts",
"chars": 3789,
"preview": "import type {\n Options,\n AxisOptions,\n Data,\n Series,\n SeriesObject,\n SegmentData,\n CreatedEvent,\n DrawEvent,\n "
},
{
"path": "src/charts/LineChart/index.ts",
"chars": 64,
"preview": "export * from './LineChart';\nexport * from './LineChart.types';\n"
},
{
"path": "src/charts/PieChart/PieChart.spec.ts",
"chars": 13502,
"preview": "import { namespaces, deserialize } from '../../core';\nimport { PieChartOptions, PieChartData, PieChart } from '.';\nimpor"
},
{
"path": "src/charts/PieChart/PieChart.stories.ts",
"chars": 3506,
"preview": "import 'chartist-dev/styles';\nimport { PieChart } from 'chartist-dev';\n\nexport default {\n title: 'PieChart',\n argTypes"
},
{
"path": "src/charts/PieChart/PieChart.ts",
"chars": 17261,
"preview": "import type {\n LabelDirection,\n AnchorPosition,\n Dot,\n PieChartData,\n PieChartOptions,\n PieChartOptionsWithDefault"
},
{
"path": "src/charts/PieChart/PieChart.types.ts",
"chars": 4177,
"preview": "import type {\n Options,\n Label,\n Data,\n FlatSeries,\n CreatedEvent,\n DrawEvent,\n NormalizedSeriesValue\n} from '../"
},
{
"path": "src/charts/PieChart/index.ts",
"chars": 62,
"preview": "export * from './PieChart';\nexport * from './PieChart.types';\n"
},
{
"path": "src/charts/index.ts",
"chars": 139,
"preview": "export * from './BaseChart';\nexport * from './LineChart';\nexport * from './BarChart';\nexport * from './PieChart';\nexport"
},
{
"path": "src/charts/types.ts",
"chars": 408,
"preview": "import type {\n DataEvent,\n OptionsChangedEvent,\n DrawEvent,\n CreatedEvent\n} from '../core';\nimport type { AnimationE"
},
{
"path": "src/core/constants.ts",
"chars": 728,
"preview": "/**\n * This object contains all namespaces used within Chartist.\n */\nexport const namespaces: Record<string, string> = {"
}
]
// ... and 81 more files (download for full content)
About this extraction
This page contains the full source code of the chartist-js/chartist GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 281 files (467.6 KB), approximately 132.9k tokens, and a symbol index with 318 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.