timqian / chart.xkcd Goto Github PK
View Code? Open in Web Editor NEWxkcd styled chart lib
Home Page: https://timqian.com/chart.xkcd/
License: MIT License
xkcd styled chart lib
Home Page: https://timqian.com/chart.xkcd/
License: MIT License
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.
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
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)
Hello!
Can I build a combined chart like a screenshot?
https://tetis-capital.ru/upload/image/chart.png
IssueHunt has been backed by the following sponsors. Become a sponsor
allows user to toggle visible and invisible of different labels
Feel free to bring up suggestions for tools to makes chart.xkcd better
Here are some initial ideas
Describe the bug
the label is incorrect in Chinese
Screenshot
How to reproduce
Hey! Great library.
Would it be cool if I made a PR for some new charts at some point?
e.g.
Charts on https://timqian.com/chart.xkcd/ or on CodePen doesn't have any lines. The only working chart is the donut chart.
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/
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. :)
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.
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
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
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
to0
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.
Would be great if each data stream in XY plot can have separate controllable flag of showLine
instead of a global option.
We have the showLabels
and showLegend
options for radar chart. It will be great if other charts support these options too
Chart type
Flow chart
Example of how the chart looks in other chart libs
screenshot
A useful chart type: https://www.chartjs.org/samples/latest/charts/area/radar.html
IssueHunt has been backed by the following sponsors. Become a sponsor
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
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.
Describe the bug
mouse cursor move around line console show error
How to reproduce
https://codepen.io/simuraepona/pen/gOYKVNW
chart is cool, but a few more SVGs will consume a lot of safari memory, leading to the automatic replant of web pages
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.
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:
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.
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! 🙏
I love the style but I don't have a project to use it.
Well done and thanks you ! :)
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
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.
For serious people
e.g. star-history/star-history#59 (comment)
Might also need some style updates after turning off
IssueHunt has been backed by the following sponsors. Become a sponsor
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?
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?
Describe the bug
When you hover over the chart, the Tooltip shows beneath the title. In contrast, the Tooltip shows above the legend.
Screenshot
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,
});
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.