chart-xkcd 0.1.0__tar.gz

chart_xkcd-0.1.0/.claude/settings.local.json

@@ -0,0 +1,11 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(python -m build:*)",
+      "Bash(python3 -m build:*)",
+      "Bash(uv build:*)",
+      "Bash(unzip:*)",
+      "Bash(npm run build:*)"
+    ]
+  }
+}

chart_xkcd-0.1.0/.gitignore

@@ -0,0 +1,20 @@
+# JS
+.cache
+node_modules
+js/dist/
+
+# Python
+__pycache__/
+*.py[cod]
+dist/
+.venv/
+
+# Built JS bundled into Python package
+src/chart_xkcd/static/chart.xkcd.min.js
+
+# Python-generated HTML files
+examples/*.html
+
+# Miscellaneous
+*~
+.DS_Store

chart_xkcd-0.1.0/CODE_OF_CONDUCT.md

@@ -0,0 +1,70 @@
+# Code of Conduct
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of
+experience, education, socioeconomic status, nationality, personal appearance,
+race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* using welcoming and inclusive language,
+* being respectful of differing viewpoints and experiences,
+* gracefully accepting constructive criticism,
+* focusing on what is best for the community, and
+* showing empathy towards other community members.
+
+Examples of unacceptable behavior by participants include:
+
+* the use of sexualized language or imagery and unwelcome sexual
+  attention or advances,
+* trolling, insulting/derogatory comments, and personal or political
+  attacks,
+* public or private harassment,
+* publishing others' private information, such as a physical or
+  electronic address, without explicit permission, and
+* other conduct which could reasonably be considered inappropriate in
+  a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, or to ban temporarily or permanently any
+contributor for other behaviors that they deem inappropriate, threatening,
+offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project email
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by emailing the project team. All complaints will be reviewed
+and investigated and will result in a response that is deemed necessary and
+appropriate to the circumstances. The project team is obligated to maintain
+confidentiality with regard to the reporter of an incident.  Further details of
+specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from
+the [Contributor Covenant](https://www.contributor-covenant.org/) version 1.4.

chart_xkcd-0.1.0/CONTRIBUTING.md

@@ -0,0 +1,30 @@
+> drafting
+
+# Contributing
+
+Before contributing to chart.xkcd you'll need to:
+
+- install npm
+- install uv
+- create a Python virtual environment
+
+## Setup
+
+```bash
+# install dependencies
+npm i
+```
+
+```bash
+# start examples (example/npm)
+npm start
+```
+
+Then you can open `localhost:1234` to see the examples, and you can start to edit the code. Thanks to [parcel](), the website will be auto updated when you make changes.
+
+## Layout
+
+- [docs](./docs): Documentation used to generate timqian.com/chart.xkcd
+- [examples](./examples): Examples showing how to use chart.xkcd. The npm example is also used for developing and debug features for now.
+- [js](./js): JavaScript source
+- [py](./py): Python source

chart_xkcd-0.1.0/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) egoist <0x142857@gmail.com> (https://github.com/egoist)
+
+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.

chart_xkcd-0.1.0/PKG-INFO

@@ -0,0 +1,7 @@
+Metadata-Version: 2.4
+Name: chart-xkcd
+Version: 0.1.0
+Summary: Python API for generating xkcd-style charts
+License-Expression: MIT
+License-File: LICENSE.md
+Requires-Python: >=3.13

chart_xkcd-0.1.0/README.md

@@ -0,0 +1,3 @@
+## chart.xkcd
+
+See [this repository](https://github.com/timqian/chart.xkcd) for the original code.

chart_xkcd-0.1.0/docs/01-intro.md

@@ -0,0 +1,22 @@
+---
+title: Introduction
+---
+
+<!-- Chart.xkcd is an xkcd styled chart library. Not like most chart libs out there do precise plots. The rough, seemingly hand drawn nature of the graph provides a visual hint as to the imprecision of the results. It is useful in some cases.
+
+When precise numbers
+
+
+We already have lots of great chart libraries like [chart.js](), [echart](), [chartist-js](https://github.com/gionkunz/chartist-js) etc. One of the problems I've had with them is  that everything they draw is so precise and perfect. Sometimes I want the plots looks less precise to d -->
+
+Chart.xkcd is a chart library plots "sketchy", "cartoony" or "hand-drawn" styled charts.
+
+[![donate](https://flat.badgen.net/badge/support%20me/donate/?color=e85b46)](https://patreon.com/timqian)
+[![slack](https://flat.badgen.net/badge/chat%20with%20us/slack/green)](https://join.slack.com/t/t9tio/shared_invite/enQtNjgzMzkwMDM0NTE3LTE5ZTUzYjU4Y2I0YzRiZjNkYTkzMzE1ZmM0NDdmYzRlZmMxNGY1MzZlN2EwYjYyNWVlMWY0Nzk2MDBhNWZlY2I)
+[![stars](https://flat.badgen.net/github/stars/timqian/chart.xkcd?icon=github)](https://github.com/timqian/chart.xkcd)
+[![npm](https://flat.badgen.net/npm/v/chart.xkcd/?color=fb3e44)](https://www.npmjs.com/package/chart.xkcd)
+[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/chart.xkcd/badge)](https://www.jsdelivr.com/package/npm/chart.xkcd)
+
+## Sponsors
+
+[Madao](https://madao.me/) | [Become a sponsor](https://www.patreon.com/timqian)

chart_xkcd-0.1.0/docs/02-getting-started.md

@@ -0,0 +1,35 @@
+---
+title: Getting started
+---
+
+It's easy to get started with chart.xkcd. All that's required is the script included in your page along with a single `<svg>` node to render the chart.
+
+In the following example we create a line chart.
+
+<p class="codepen" data-height="424" data-theme-id="light" data-default-tab="result" data-user="timqian" data-slug-hash="GRKqLaL" style="height: 424px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="chart.xkcd example">
+  <span>See the Pen <a href="https://codepen.io/timqian/pen/GRKqLaL/">
+  chart.xkcd example</a> by timqian (<a href="https://codepen.io/timqian">@timqian</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+
+**JS part of the example**
+
+```javascript
+  const svg = document.querySelector('.line-chart')
+  new chartXkcd.Line(svg, {
+    title: '',
+    xLabel: '',
+    yLabel: '',
+    data: {...},
+    options: {},
+  });
+```
+
+## Parameters description
+
+- `title`: optional title of the chart
+- `xLabel`: optional x label of the chart
+- `yLabel`: optional y label of the chart
+- `data`: the data you want to visulize
+- `options`: optional configurations to customize how the chart looks

chart_xkcd-0.1.0/docs/03-install.md

@@ -0,0 +1,36 @@
+---
+title: Installation
+---
+
+You can install chart.xkcd via script tag in HTML or via npm
+
+## Via Script Tag
+
+```js
+<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js" integrity="sha256-NkH6G4XRcQ5Bsfs7O6yh9mw1SJLEOJWCtWqko6VjF34=" crossorigin="anonymous"></script>
+<script>
+    const myChart = new chartXkcd.Line(svg, {...});
+</script>
+```
+
+## Via npm
+
+**Install**
+
+```bash
+npm i chart.xkcd
+```
+
+**Usage**
+
+```js
+import chartXkcd from 'chart.xkcd';
+const myChart = new chartXkcd.Line(svg, {...});
+```
+
+**Other ways**
+
+- React wrapper: [chart.xkcd-react](https://github.com/obiwankenoobi/chart.xkcd-react) <br/>
+- Vue wrapper:
+    - [chart.xkcd-vue](https://github.com/shiyiya/chart.xkcd-vue)
+    - [chart.xkcd-vue-wrapper](https://github.com/wistcc/chart.xkcd-vue-wrapper)

chart_xkcd-0.1.0/docs/04-line.md

@@ -0,0 +1,52 @@
+---
+title: Line chart
+---
+
+Line chart displays series of data points in the form of lines. It can be used to show trend data, or comparison of different data sets.
+
+<p class="codepen" data-height="424" data-theme-id="light" data-default-tab="result" data-user="timqian" data-slug-hash="GRKqLaL" style="height: 424px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="chart.xkcd example">
+  <span>See the Pen <a href="https://codepen.io/timqian/pen/GRKqLaL/">
+  chart.xkcd example</a> by timqian (<a href="https://codepen.io/timqian">@timqian</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+
+## JS part
+
+```js
+const lineChart = new chartXkcd.Line(svg, {
+  title: 'Monthly income of an indie developer', // optional
+  xLabel: 'Month', // optional
+  yLabel: '$ Dollars', // optional
+  data: {
+    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+    datasets: [{
+      label: 'Plan',
+      data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000],
+    }, {
+      label: 'Reality',
+      data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
+    }],
+  },
+  options: { // optional
+    yTickCount: 3,
+    legendPosition: chartXkcd.config.positionType.upLeft
+  }
+})
+```
+
+## Customize chart by defining options
+
+- `yTickCount`: customize tick numbers you want to see on the y axis (default `3`)
+- `showLegend`: display legend near chart (default `true`)
+- `legendPosition`: specify where you want to place the legend. (default `chartXkcd.config.positionType.upLeft`)
+  Possible values:
+    - up left: `chartXkcd.config.positionType.upLeft`
+    - up right: `chartXkcd.config.positionType.upRight`
+    - bottom left: `chartXkcd.config.positionType.downLeft`
+    - bottom right: `chartXkcd.config.positionType.downRight`
+- `dataColors`: array of colors for different datasets
+- `fontFamily`: customize font family used in the chart
+- `unxkcdify`: disable xkcd effect (default `false`)
+- `strokeColor`: stroke colors (default `black`)
+- `backgroundColor`: color for BG (default `white`)

chart_xkcd-0.1.0/docs/05-XY.md

@@ -0,0 +1,73 @@
+---
+title: XY chart
+---
+
+XY chart is used to plot points by specifying their XY coordinates.
+
+You can also plot XY line chart by connecting the points.
+
+<p class="codepen" data-height="445" data-theme-id="light" data-default-tab="result" data-user="timqian" data-slug-hash="ExYZvZY" style="height: 445px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="chart.xkcd XY">
+  <span>See the Pen <a href="https://codepen.io/timqian/pen/ExYZvZY/">
+  chart.xkcd XY</a> by timqian (<a href="https://codepen.io/timqian">@timqian</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+
+## JS part
+
+```js
+  const svg = document.querySelector('.xy-chart');
+
+  new chartXkcd.XY(svg, {
+    title: 'Pokemon farms', //optional
+    xLabel: 'Coordinate', //optional
+    yLabel: 'Count', //optional
+    data: {
+      datasets: [{
+        label: 'Pikachu',
+        data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 100 }, { x: 1, y: 2 }, { x: 2, y: 4 }],
+      }, {
+        label: 'Squirtle',
+        data: [{ x: 3, y: 122 }, { x: 4, y: 212 }, { x: -3, y: 100 }, { x: 1, y: 1 }, { x: 1.5, y: 12 }],
+      }],
+    },
+    options: { //optional
+      xTickCount: 5,
+      yTickCount: 5,
+      legendPosition: chartXkcd.config.positionType.upRight,
+      showLine: false,
+      timeFormat: undefined,
+      dotSize: 1,
+    },
+  });
+```
+
+## Customize XY chart by defining options
+
+- `xTickCount`: customize tick numbers you want to see on the x axis (default `3`)
+- `yTickCount`: customize tick numbers you want to see on the y axis (default `3`)
+- `showLegend`: display legend near chart (default `true`)
+- `legendPosition`: specify where you want to place the legend (default `chartXkcd.config.positionType.upLeft`)
+  Possible values:
+    - up left: `chartXkcd.config.positionType.upLeft`
+    - up right: `chartXkcd.config.positionType.upLeft`
+    - bottom left: `chartXkcd.config.positionType.downLeft`
+    - bottom right: `chartXkcd.config.positionType.downRight`
+- `showLine`: connect the points with lines (default: `false`)
+- `timeFormat`: specify the time format if the x values are time (default `undefined`)
+  chart.xkcd use [dayjs](https://github.com/iamkun/dayjs) to format time, you can find the all the available formats [here](https://github.com/iamkun/dayjs/blob/dev/docs/en/API-reference.md#list-of-all-available-formats)
+- `dotSize`: you can change size of the dots if you want (default `1`)
+- `dataColors`: array of colors for different datasets
+- `fontFamily`: customize font family used in the chart
+- `unxkcdify`: disable xkcd effect (default `false`)
+- `strokeColor`: stroke colors (default `black`)
+- `backgroundColor`: color for BG (default `white`)
+
+**Another example of XY chart: XY line chart with `timeFormat`**
+
+<p class="codepen" data-height="472" data-theme-id="light" data-default-tab="result" data-user="timqian" data-slug-hash="ZEzLJaN" style="height: 472px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="chart.xkcd XY line">
+  <span>See the Pen <a href="https://codepen.io/timqian/pen/ZEzLJaN/">
+  chart.xkcd XY line</a> by timqian (<a href="https://codepen.io/timqian">@timqian</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

chart_xkcd-0.1.0/docs/06-bar.md

@@ -0,0 +1,40 @@
+---
+title: Bar chart
+---
+
+A bar chart provides a way of showing data values represented as vertical bars
+
+<p class="codepen" data-height="509" data-theme-id="light" data-default-tab="result" data-user="timqian" data-slug-hash="QWLERdG" style="height: 509px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="chart.xkcd bar">
+  <span>See the Pen <a href="https://codepen.io/timqian/pen/QWLERdG/">
+  chart.xkcd bar</a> by timqian (<a href="https://codepen.io/timqian">@timqian</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+
+## JS part
+
+```js
+const barChart = new chartXkcd.Bar(svg, {
+  title: 'github stars VS patron number', // optional
+  // xLabel: '', // optional
+  // yLabel: '', // optional
+  data: {
+    labels: ['github stars', 'patrons'],
+    datasets: [{
+      data: [100, 2],
+    }],
+  },
+  options: { // optional
+    yTickCount: 2,
+  },
+});
+```
+
+## Customize chart by defining options
+
+- `yTickCount`: customize tick numbers you want to see on the y axis
+- `dataColors`: array of colors for different datasets
+- `fontFamily`: customize font family used in the chart
+- `unxkcdify`: disable xkcd effect (default `false`)
+- `strokeColor`: stroke colors (default `black`)
+- `backgroundColor`: color for BG (default `white`)

chart_xkcd-0.1.0/docs/07-stacked-bar.md

@@ -0,0 +1,51 @@
+---
+title: Stacked bar chart
+---
+
+A stacked bar chart provides a way of showing data values represented as vertical bars
+
+<p class="codepen" data-height="429" data-theme-id="default" data-default-tab="result" data-user="timqian" data-slug-hash="KKwPrEm" style="height: 429px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="chart.xkcd stacked bar">
+  <span>See the Pen <a href="https://codepen.io/timqian/pen/KKwPrEm">
+  chart.xkcd stacked bar</a> by timqian (<a href="https://codepen.io/timqian">@timqian</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+
+## JS part
+
+```js
+new chartXkcd.StackedBar(svg, {
+  title: 'Issues and PR Submissions',
+  xLabel: 'Month',
+  yLabel: 'Count',
+  data: {
+    labels: ['Jan', 'Feb', 'Mar', 'April', 'May'],
+    datasets: [{
+      label: 'Issues',
+      data: [12, 19, 11, 29, 17],
+    }, {
+      label: 'PRs',
+      data: [3, 5, 2, 4, 1],
+    }, {
+      label: 'Merges',
+      data: [2, 3, 0, 1, 1],
+    }],
+  },
+});
+```
+
+## Customize chart by defining options
+
+- `yTickCount`: customize tick numbers you want to see on the y axis
+- `dataColors`: array of colors for different datasets
+- `fontFamily`: customize font family used in the chart
+- `unxkcdify`: disable xkcd effect (default `false`)
+- `strokeColor`: stroke colors (default `black`)
+- `backgroundColor`: color for BG (default `white`)
+- `showLegend`: display legend near chart (default `true`)
+- `legendPosition`: specify where you want to place the legend (default `chartXkcd.config.positionType.upLeft`)
+  Possible values:
+    - up left: `chartXkcd.config.positionType.upLeft`
+    - up right: `chartXkcd.config.positionType.upLeft`
+    - bottom left: `chartXkcd.config.positionType.downLeft`
+    - bottom right: `chartXkcd.config.positionType.downRight`

chart_xkcd-0.1.0/docs/08-pie.md

@@ -0,0 +1,45 @@
+---
+title: Pie/Doughnut chart
+---
+
+<p class="codepen" data-height="470" data-theme-id="light" data-default-tab="result" data-user="timqian" data-slug-hash="VwZjOPR" style="height: 470px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="chart.xkcd pie">
+  <span>See the Pen <a href="https://codepen.io/timqian/pen/VwZjOPR/">
+  chart.xkcd pie</a> by timqian (<a href="https://codepen.io/timqian">@timqian</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+
+## JS part
+
+```js
+const pieChart = new chartXkcd.Pie(svg, {
+  title: 'What Tim is made of', // optional
+  data: {
+    labels: ['a', 'b', 'e', 'f', 'g'],
+    datasets: [{
+      data: [500, 200, 80, 90, 100],
+    }],
+  },
+  options: { // optional
+    innerRadius: 0.5,
+    legendPosition: chartXkcd.config.positionType.upRight,
+  },
+});
+```
+
+## Customize chart by defining options
+
+- `innerRadius`: specify empty pie chart radius (default: `0.5`)
+  - Want a pie chart? set `innerRadius` to `0`
+- `showLegend`: display legend near chart (default `true`)
+- `legendPosition`: specify where you want to place the legend. (default `chartXkcd.config.positionType.upLeft`)
+  Possible values:
+    - up left: `chartXkcd.config.positionType.upLeft`
+    - up right: `chartXkcd.config.positionType.upLeft`
+    - bottom left: `chartXkcd.config.positionType.downLeft`
+    - bottom right: `chartXkcd.config.positionType.downRight`
+- `dataColors`: array of colors for different datasets
+- `fontFamily`: customize font family used in the chart
+- `unxkcdify`: disable xkcd effect (default `false`)
+- `strokeColor`: stroke colors (default `black`)
+- `backgroundColor`: color for BG (default `white`)

chart_xkcd-0.1.0/docs/09-radar.md

@@ -0,0 +1,52 @@
+---
+title: Radar chart
+---
+
+<p class="codepen" data-height="434" data-theme-id="light" data-default-tab="result" data-user="timqian" data-slug-hash="VwZQBoj" style="height: 434px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="chart.xkcd radar">
+  <span>See the Pen <a href="https://codepen.io/timqian/pen/VwZQBoj/">
+  chart.xkcd radar</a> by timqian (<a href="https://codepen.io/timqian">@timqian</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+
+## JS part
+
+```js
+const radar = new chartXkcd.Radar(svg, {
+  title: 'Letters in random words', // optional
+  data: {
+    labels: ['c', 'h', 'a', 'r', 't'],
+    datasets: [{
+      label: 'ccharrrt', // optional
+      data: [2, 1, 1, 3, 1],
+    }, {
+      label: 'chhaart', // optional
+      data: [1, 2, 2, 1, 1],
+    }],
+  },
+  options: { // optional
+    showLegend: true,
+    dotSize: .8,
+    showLabels: true,
+    legendPosition: chartXkcd.config.positionType.upRight,
+  },
+});
+```
+
+## Customize chart by defining options
+
+- `showLabels`: display labels near every line (default `false`)
+- `ticksCount`: customize tick numbers you want to see on the main line (default `3`)
+- `dotSize`: you can change size of the dots if you want (default `1`)
+- `showLegend`: display legend near chart (default `false`)
+- `legendPosition`: specify where you want to place the legend. (default `chartXkcd.config.positionType.upLeft`)
+  Possible values:
+    - up left: `chartXkcd.config.positionType.upLeft`
+    - up right: `chartXkcd.config.positionType.upRight`
+    - bottom left: `chartXkcd.config.positionType.downLeft`
+    - bottom right: `chartXkcd.config.positionType.downRight`
+- `dataColors`: array of colors for different datasets
+- `fontFamily`: customize font family used in the chart
+- `unxkcdify`: disable xkcd effect (default `false`)
+- `strokeColor`: stroke colors (default `black`)
+- `backgroundColor`: color for BG (default `white`)

chart_xkcd-0.1.0/examples/bar.py

@@ -0,0 +1,14 @@
+"""Example: Bar chart."""
+
+import sys
+from chart_xkcd import Bar, render
+
+chart = Bar(
+    title="Github Stars vs Patron Count",
+    x_label="Project",
+    y_label="Count",
+    labels=["chart.xkcd", "star-history", "tomato-pie"],
+    datasets=[{"data": [2100, 430, 90]}],
+)
+
+render(chart, sys.argv[1], chart_js_url="/src/chart_xkcd/static/chart.xkcd.min.js")

chart_xkcd-0.1.0/examples/line.py

@@ -0,0 +1,23 @@
+"""Example: Line chart."""
+
+import sys
+from chart_xkcd import Line, render
+
+chart = Line(
+    title="Monthly Income of an Indie Developer",
+    x_label="Month",
+    y_label="$ Dollars",
+    labels=["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
+    datasets=[
+        {
+            "label": "Plan",
+            "data": [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000],
+        },
+        {
+            "label": "Reality",
+            "data": [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
+        },
+    ],
+)
+
+render(chart, sys.argv[1], chart_js_url="/src/chart_xkcd/static/chart.xkcd.min.js")

chart_xkcd-0.1.0/examples/pie.py

@@ -0,0 +1,16 @@
+"""Example: Pie chart."""
+
+import sys
+from chart_xkcd import Pie, positionType, render
+
+chart = Pie(
+    title="What Tim Is Made Of",
+    labels=["Code", "Coffee", "Sleep", "Snacks"],
+    datasets=[{"data": [500, 200, 80, 90]}],
+    options={
+        "innerRadius": 0.5,
+        "legendPosition": positionType.upRight,
+    },
+)
+
+render(chart, sys.argv[1], chart_js_url="/src/chart_xkcd/static/chart.xkcd.min.js")