timqian / chart.xkcd Goto Github PK

allows user to toggle visible and invisible of different labels

Example

Usage example

star-history/star-history#62

There is no option to change Color, Font Size, Font Family, and other CSS Related Styles.

Chart JS and other Similar Plugin has those Options.

Can you add those options on this plugin?

Hi @timqian, Is there a easy way to control the SVG size?

I try to set width and height attr like this

<svg class="line-chart" width="800px" height="600px"></svg>

but it seem doesn't work. :)

Features

• install via npm (PR #7)
• smaller bundle size (PR #7 468KB => 68KB)
• options tick numbers etcs #5 #11 (PR #12)
  for line chart & bar chart, it is not possible to specify tick numbers in the current implementation as I am using scalePoint method of D3(ref), But it is possible for XY chart.
  update: we can not specify tick number, but can rotate the tick text when there are too many ticks (ref)
• label spacing depend on label size instead of hard coded numbers
• API to update chart
  To update the chart, redrawing it seem enough for now
• Documentation of APIs
• UI to export svg
  Not part of chart.xkcd

New charts

• XY chart scatter or line (PR #12)
• Radar #2
• Seprate Pie&Doughnut chart ? https://timqian.com/chart.xkcd/#pie_doughnut_chart.customize_chart_by_defining_options

Bugs Fix

• display issue on Safari #3

Chart type: histogram

Would it be possible to modify the bar chart to accept bins (start, stop, and count) and then have them touch one another?

Example of how the chart looks in other chart libs

• https://observablehq.com/@d3/histogram

I'm developing a web assembly + golang regression, and plotting residuals with a histogram, and I'd really love to use this library! I couldn't get something correct looking with the standard bar plot.

• screenshot

I've observed that the library doesn't collect/send any data but wondered if it might be useful to add a privacy policy confirming this for sure in the documentation/readme?

The stacked bar graph example does not work on 1.1.15 (latest) but works fine on 1.1.13.

On 1.1.15 it throws an error regeneratorruntime is not defined while trying to render the color legend.

Open source works based on chart.xkcd

Feel free to list your website/tool making use of chart.xkcd here

Here are some tool I plan to make use of chart.xkcd

• star-history - the missing star history of github repos

• tomato-pie - A new UI for Pomodoro Technique

• blog of t9t.io - record revenue/user count or other status of my transparent startup experiment(in Chinese)

Describe the bug
I was tinkering around this library and started the example from the README.md for Line chart and found that , its not plotting the graph without presence of the options config. Its plots the x and y axes but no lines inside those graph, look for screenshot 1 for more details

But If i do provide the options, even with empty object, it plots lines accordingly

Screenshot

Screenshot 1

How to reproduce
Look for the codepen link here

Describe the bug
When you hover over the chart, the Tooltip shows beneath the title. In contrast, the Tooltip shows above the legend.

Screenshot

Before

After

How to reproduce
Hover over the line so the Tooltip shows near the title of the chart

Additional context
It looks like an easy fix could be to construct the Tooltip after the title is added. So the Tooltip is after the title in the DOM and shows above it.

Instead of having the New Tooltip in the constructor, you could put it in the render:
src/Line.js

  render() {
    if (this.title) addLabels.title(this.svgEl, this.title);

    this.tooltip = new Tooltip({
      parent: this.svgEl,
      title: '',
      items: [{ color: 'red', text: 'weweyang' }, { color: 'blue', text: 'timqian' }],
      position: { x: 60, y: 60, type: config.positionType.dowfnRight },
      unxkcdify: this.options.unxkcdify,
    });

A useful chart type: https://www.chartjs.org/samples/latest/charts/area/radar.html

Feel free to bring up suggestions for tools to makes chart.xkcd better

Here are some initial ideas

• a website to convert csv data to chart and support
  • download svg
  • embed chart to other website with ease
• cmd tool to convert csv to chart (open up the website above with data sent to the site?)

Chart type

Flow chart

Example of how the chart looks in other chart libs

• link: https://sketchviz.com/new

• screenshot

Interesting project! The syntax of your library strongly reminds me of vega-lite, which itself is based on vega and the latter being itself based on d3.

I can see at least three advantages for your library, in particular the rendering part, if you built a renderer for vega:

• vega is extensible, even on the rendering part, and thus you would benefit from an already available interactive grammar of graphics syntax - no burden of inventing a new one;
• better focus on the rendering itself instead of users asking for implementing this and that type of chart;
• your renderer would be accessible to js (via vega and vega-lite), R (via vega widget) and python (via altair) communities.

We have the showLabels and showLegend options for radar chart. It will be great if other charts support these options too

Hey! Great library.
Would it be cool if I made a PR for some new charts at some point?
e.g.

• scatter plot
• waffle plot
• box plot

Why do we need this option?

We are not able to customize x axis tick number of line chart. When there are too many data points to render, the x axis looks bad

Describe the solution you'd like

xTickCount option for line chart

Would be great if each data stream in XY plot can have separate controllable flag of showLine instead of a global option.

Describe the bug

Negative numbers in datasets are not shown in StackedBar, mess up labels, or end up going below the origin even for the "positive stack"

Screenshot
If applicable, add screenshots to help explain your problem.

How to reproduce

<svg class="chart"></svg>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.xkcd.min.js"></script>
<script>
  const svg = document.querySelector('.chart');

  new chartXkcd.StackedBar(svg, {
     data: {
       labels: ["normal","-20","-30"],
      datasets: [{
        label: 'Red',
        data: [10,-20,-30],
      }, {
        label: 'Blue',
        data: [20,20,20],
      }],
     }
  });
</script>

or see https://jsfiddle.net/3dpbg241/

Additional context

I'd expect at least the positive dataset to stay above the line, and the labels to match up. Preferably, I'd get the "Red" in the example going below the line, and "Blue" above, and the Ylabel line would continue below the origin.

I was instructed to open an issue here, after asking about this on this other github site: star-history/star-history#396

This question is for user @timqian.
Repo-Analytics was a very useful tool. I used it often to check on the long term trend of git clones and referring websites. Then one day the website stopped loading. I cannot access the data anymore.

ByteBase took over maintenance for your star-history project. Can they also repair repo-analytics? Many people would find that helpful. No other online tool has the same capabilities.

Describe the bug

the label is incorrect in Chinese

Screenshot

How to reproduce

https://codepen.io/simuraepona/pen/xxxzNJz

Describe the bug
mouse cursor move around line console show error

Screenshot

How to reproduce
https://codepen.io/simuraepona/pen/gOYKVNW

Hey @timqian! 👋

Just wanted to reach out about funding your work on chart.xkcd.

@transitive-bullshit and I are both open source maintainers, and we're exploring new ways to make OSS funding a viable source of income.

We're currently looking at building rate-limited SaaS APIs on top of existing OSS libraries, reserving the majority of profits for the original authors. We've built a few at this point, but want to keep adding more.

I think chart.xkcd would be a great fit, and I'd love to use it to build a SaaS API for rendering graphs to images. We'd handle dev, auth, billing and support so you wouldn't have to do anything.

Looking forward to hearing your thoughts! 🙏

Hi @timqian - as mentioned elsewhere, I'm loving your work! :)

I'm just testing 1.0.7 and observed in the documentation that innerRadius is a valid key in the options object for the Pie chart. I've been testing the functionality and works as expected, with the exception of 0 as a value.

According the to the doc:

Want a pie chart? set innerRadius to 0

This works all the way down to 0.01 and then when set to 0 it reverts the chart back to the default (0.5), so I suspect there might be an evaluation of 0 that is coercing to default.
I've attached an example of rendering for a couple of values, but can reproduce in the codepen examples also.

Describe the bug
svg元素和他的父元素宽度是一致，设置flex或者margin: 0 auto都没办法水平居中;
Screenshot

How to reproduce

<div class="posts-chart" style="width: 800px;">
    <svg class="line-chart"></svg>
</div>

const svg = document.querySelector('.posts-chart .line-chart');
// chartXkcd.Line 创建一个折线图
const lineChart = new chartXkcd.Line(svg, {
    //图表的标题
    title: '文章归档统计图',
    // 图表的 x 标签
    xLabel: '日期',
    // 图表的 y 标签
    yLabel: '文章篇数',
    // 需要可视化的数据
    data: {
        // x 轴数据
        labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
        // y 轴数据
        datasets: [{
            // 第二组数据
            label: '篇数',
            data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
        }],
    },
    // 可选配置以自定义图表的外观
    options: {
        // 自定义要在 y 轴上看到的刻度号（默认为 3）
        yTickCount: 3,
        // 指定要放置图例的位置
        legendPosition: chartXkcd.config.positionType.upLeft
    }
});

Additional context
Add any other context about the problem here.

chart is cool, but a few more SVGs will consume a lot of safari memory, leading to the automatic replant of web pages

It'd be nice to have options for the legend to be in the bottom left/right. This'd be a bodge fix for text overlapping the titles too.

I'd like an option to display the percentage, either alongside the number or instead of it. I imagine this'd be rounded off to 1dp to keep things simple.

ref: https://github.com/actions/npm

Describe the bug
The tooltip title is shown as the literal text "tooltip" instead of the actual label until you hover the mouse over the second stack of stacked bar.

After moving the mouse out and back again, it does the right thing the second time (see animation below).

Screenshot

first time down after loading the page, it shows "tooltip" over the blue part, then switches to "normal" when hovering over the red, then I move the mouse away and back again and it still shows "normal".

How to reproduce
Works with the same one from my other issue :) https://jsfiddle.net/3dpbg241/

I'm trying to use the latest version (HEAD, not released) using Webpack and I get this error. Using the latest official npm release doesn't have this problem.

Hey man, great library! I wonder if the docs are completed and this is an example of a complete config?

 {
    title: 'Monthly income of an indie developer',
    xLabel: 'Month',
    yLabel: '$ Dollors',
    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],
      }]
    },
  }

Charts on https://timqian.com/chart.xkcd/ or on CodePen doesn't have any lines. The only working chart is the donut chart.

Current way to xkcdify charts is by making use of svg filter which is pixel based. It does not look smooth. especially in none retina screens.

Need to find a good way to make it look smoother

I love the style but I don't have a project to use it.
Well done and thanks you ! :)

Often I have many more points on the x axis than what I would want to show on the plot. It is currently impossible to specify a set of xticks different from the whole set of x data.

Hello!
Can I build a combined chart like a screenshot?
https://tetis-capital.ru/upload/image/chart.png

Describe the bug

> [email protected] install /Users/nemo/chart.xkcd-origin/node_modules/deasync
> node ./build.js

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:210:5)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Darwin 19.0.0
gyp ERR! command "/usr/local/Cellar/node/13.1.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/nemo/chart.xkcd-origin/node_modules/deasync
gyp ERR! node -v v13.1.0
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok
Build failed
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node ./build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

How to reproduce

$ npm i

Solution (I'm not going to create a PR.)

$ git rm package-lock.json
$ echo '\npackage-lock.json' >> .gitignore

Chart type: word cloud chart

Example of how the chart looks in other chart libs

• screenshot

For serious people
e.g. star-history/star-history#59 (comment)

Might also need some style updates after turning off