Comments (8)
@matthewgillespie sure. sorry for not giving enough information.
line numbers are as in https://github.com/gionkunz/chartist-plugin-pointlabels/blob/master/src/scripts/chartist-plugin-pointlabels.js
in the function "labelPositionCalculation" there it defines several positions for bar-charts.
a quick-fix solution is to change there in the "left" position to use data.y2 instead of data.y1.
for myself i added positioning for "top" and "middle" in case i want to use them.
so my whole function looks now like this:
var labelPositionCalculation = {
point: function(data) {
return {
x: data.x,
y: data.y
};
},
bar: {
left: function(data) {
return {
x: data.x1,
y: data.y1
};
},
center: function(data) {
return {
x: data.x1 + (data.x2 - data.x1) / 2,
y: data.y1
};
},
right: function(data) {
return {
x: data.x2,
y: data.y1
};
},
top: function(data) {
return {
x: data.x1,
y: data.y2
};
},
middle: function(data) {
return {
x: data.x1,
y: data.y1 + (data.y2 - data.y1)/2
};
}
}
};
and i would change the calling of the plugin to:
Chartist.plugins.ctPointLabels({
textAnchor: 'middle', //get it horizontal-wise middle of the bar
align: 'top', //and verticaly on top of it
labelOffset:{x:0,y:-2} //adding a little offset to get some space
})
from chartist-plugin-pointlabels.
if you want to have it on top (like i wanted) change in line 31 "data.y1" to "data.y2" and the same in line 37 and 43. it takes the wrong y-data if you want to have it displayed on top.
from chartist-plugin-pointlabels.
Experiencing the same issue.
@gaenseklein Can you provide more context? I don't see anything that has a line 31, 37, or 43.
from chartist-plugin-pointlabels.
oh, in case you are wondering: i am not the only person who came up with this solution, as there is already a pull request open with the exact same patch, so i did not open a second one:
3572168
from chartist-plugin-pointlabels.
@gaenseklein thank you for the thorough answer!
from chartist-plugin-pointlabels.
Thanks for the solution @gaenseklein. It didn't work for me though. Whenever I put align: 'top' inside Chartist.plugins.ctPointLabels it breaks the chart. Any ideas?
from chartist-plugin-pointlabels.
@matthewgillespie sure. sorry for not giving enough information.
line numbers are as in https://github.com/gionkunz/chartist-plugin-pointlabels/blob/master/src/scripts/chartist-plugin-pointlabels.jsin the function "labelPositionCalculation" there it defines several positions for bar-charts.
a quick-fix solution is to change there in the "left" position to use data.y2 instead of data.y1.
for myself i added positioning for "top" and "middle" in case i want to use them.
so my whole function looks now like this:var labelPositionCalculation = { point: function(data) { return { x: data.x, y: data.y }; }, bar: { left: function(data) { return { x: data.x1, y: data.y1 }; }, center: function(data) { return { x: data.x1 + (data.x2 - data.x1) / 2, y: data.y1 }; }, right: function(data) { return { x: data.x2, y: data.y1 }; }, top: function(data) { return { x: data.x1, y: data.y2 }; }, middle: function(data) { return { x: data.x1, y: data.y1 + (data.y2 - data.y1)/2 }; } } };
and i would change the calling of the plugin to:
Chartist.plugins.ctPointLabels({ textAnchor: 'middle', //get it horizontal-wise middle of the bar align: 'top', //and verticaly on top of it labelOffset:{x:0,y:-2} //adding a little offset to get some space })
I tried you solution, but somehow it breaks the graph. Only one leftmost bar seems to appear and all the others are thrown away even in the DOM.
Any alternative to it?
from chartist-plugin-pointlabels.
As I suspected, there is a type error in the source code preventing the graph to load.
I copied and pasted the code and I could do the work after changing x1 and y1 to x2 and y2. I changed it because the code which worked for me so that I could insert a peak circle at the top of the bar and animate it was using x2 and y2.
I also changed the plugin default config to this:
Chartist.plugins.ctPointLabels({
textAnchor: 'middle', //get it horizontal-wise middle of the bar
labelOffset:{x:0,y:-10} //adding a little offset to get some space
})
I removed the align: 'top'
here since it triggers the function with type error.
Gladly it works as I aspected. Here it is my finished bar chart with proper labelings
from chartist-plugin-pointlabels.
Related Issues (15)
- ctPointLabels is not defined HOT 10
- 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
- [object Object] instead of data 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
- Overlapping of point labels in multi line chart HOT 2
- How set the color of each point on one line...
- Possible for Bar chart? HOT 2
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.