Comments (2)
Plugin is using SVG text element ( http://tutorials.jenkov.com/svg/text-element.html ), so it looks like no much could be done in terms of changing position for point labels with CSS.
Only something like this, once you added additional class in chartist-plugin-pointlabels.js (labelClass: 'ct-label ct-pointlabel',) :
.ct-pointlabel {
stroke: red;
font-size: 1.3rem;
}
Here is one way to do it, although it's a "manual" one:
Inside chartist-plugin-pointlabels.js add check for data.meta:
if (data.meta !== undefined) { // check if meta defined for the point
data.group.elem('text', {
x: position.x + options.labelOffset.x,
y: position.y + options.labelOffset.y + data.meta, // use meta's value to move text vertically
style: 'text-anchor: ' + options.textAnchor
}, options.labelClass).text(options.labelInterpolationFnc(value));
}
In your HTML file add meta to your data - just replace values with pairs {value: 0.12, meta: 30} :
series: [
[0.13, 0.01, 0.25, 0.01, 0.18, {value: 0.12, meta: 30}], - this will display point label for the last point only, so you may also prune some of the labels with this method.
2020-10-30 UPDATE:
Color it in the same color as the line, e.g.:
/* Set colours for lines. Lines are listed from the bottom to the top */
.ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-pointlabel { /* Line 1 */
stroke: #70AD47;
}
If you replace meta: 30 above with meta: '+12.1 +30.0', you can now shift it by deltaX and deltaY values, using the code below. Also just an idea: you may get pixel value of the width of the chart and create a multiplier k (... + k*deltaY,) out of it and use it to move numbers closer/farther to each other with the change of the screen/chart width:
//var chartWidth = document.getElementById('chart1').offsetWidth;
if (data.meta !== undefined) {
// '+12.1 +06.8' - 1st number is deltaX, 2nd is deltaY
var deltaX = parseFloat(data.meta.substr(0, data.meta.indexOf(' ')));
var deltaY = parseFloat(data.meta.substr(data.meta.indexOf(' ')+1));
data.group.elem('text', {
x: position.x + options.labelOffset.x + deltaX,
y: position.y + options.labelOffset.y + deltaY,
style: 'text-anchor: ' + options.textAnchor
}, options.labelClass).text(options.labelInterpolationFnc(value));
}
from chartist-plugin-pointlabels.
Thanks!
from chartist-plugin-pointlabels.
Related Issues (16)
- ctPointLabels is not defined HOT 10
- [object Object] instead of data HOT 8
- Possible for Bar chart? HOT 2
- webpack compability - Chartist is not defined
- Point Labels are not being created HOT 4
- constructor.name problematic use HOT 2
- labelInterpolationFnc 0 gets passed as undefined HOT 7
- chartist-plugin-pointlabels doesnt work on production mode HOT 1
- Wrong label position on Bar Charts HOT 8
- Limits variable availability on falsey "Y" value HOT 3
- TypeError: Cannot read property 'plugins' of undefined HOT 1
- label position in bar chart HOT 1
- AxisX 0 undefined HOT 5
- How set the color of each point on one line...
- How get and display sum of total values in Bar chart
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-plugin-pointlabels.