Comments (2)
Hi There! Nice styling! :-)
The problem you're facing is that Chartist is always using the configured areaBase
to close the area shape and this is by default 0. Check http://gionkunz.github.io/chartist-js/api-documentation.html#chartistline-method-line for the configuration defaults.
The areaBase value is used to close the shape which means that in your first example it tries to close the shape down until the value 0 which is very much off the chart.
Now you could either set the areaBase
to your lowest level in the chart if you know this always or you could set your low
config to 0 so that the chart is always including the value down to zero. This looks more like a financial chart though where it's probably not nice to always pivot the y axis at 0.
I think we could safely file a bug where we say that areaBase
should be used as long as it's in the range of the low and high of the chart. Otherwise low or height should be used. This way the drawing will stop at 50 in your first chart. Let me think about this a bit more.
Cheers and thanks for the detailed report!
Gion
from chartist.
Also a nice trick if you'd like to draw charts that should look more accurate. Try to play around with https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering
Specially for the grid lines the style shape-rendering: crispEdges
is very nice. I'm even thinking about to include that per default in the generated stylesheet for all grid lines.
from chartist.
Related Issues (20)
- [Bug]: More descriptive error message when DOM node for container was not found
- [Bug]: SASS styling no longer available HOT 8
- Please provide a `dist` folder at the root of the repository HOT 1
- [Bug]: Can't import `index.css` HOT 1
- [Bug]: package.json: conflict between `puppeteer` and `@storybook/addon-storyshots-puppeteer` HOT 1
- Do not set Chart.svg as protected or allow direct access in some other way
- Implement SVG graphics export HOT 1
- precompiled releases again like before HOT 3
- [Bug]: Using responsive options fails on some browsers
- [Bug]: old website linked in repo HOT 1
- Please provide a standalone example (HTML/CSS/JS) of Chartist 1.0+ in action HOT 2
- Support for viewBox for scalable and responsive charts
- [Bug]: Pulling from CDN gives latest 0.x.x version HOT 4
- Support dual Y-Axis HOT 1
- barstack with label on bar
- [Bug]: Error: ENOENT: no such file or directory, open '\node_modules\chartist\src\styles\index.scss'
- Support plot legends
- [Bug]: Invalid Homepage Link on npm
- NodeJS JSDOM support - ability to render on the backend
- [Bug]: Prototype Pollution Vulnerability Affecting chartist module, versions >=1.0.0 <=1.3.0
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chartist.