Is it possible to change x-axis label orientation like marked area on the screenshot? I was trying rotate labels with afterCalculateTickRotation but they weren't flipped. Mirror option doesn't work also.
Example code
I managed to do what you are asking for but it's not beautiful because chart.js lacks support to do it properly. So I solved it with some hard coded padding.
https://codesandbox.io/s/vue-template-4ygr1
It's the minRotation and maxRotation you should work with. The labels anchoring point should shift when the rotation goes below zero but they don't. Instead they rotate into the chart but this can be avoided with padding.
A side effect of the padding is that the legend placement broke so i put it in the top instead.
Another unwanted behavior is that the text is aligned to the right. There is an open issue about that: https://github.com/chartjs/Chart.js/issues/4193
Related
I am trying to implement zooming and Linking&Brushing in Bubble chart.
Aplaying linking and brushing while data are still on initial position works just fine. Also zooming alone works just fine.
But if I zoom the chart and then i try to select the data, then it's not selecting the right ones.
Example:
Brushing while zooming is not applied
Bushing after zooming was applied
I am using brush.extent() to get the position of brushing space. Somehow the position of dots is never updated, while zooming.
I can take under consideration the scale size while I am brushing. But I am asking if there is something which updates the dots position after zooming automatically. Or am I missing something as I am pretty new at using d3.js and also on visualization field.
If anyone is facing the same error, maybe my solution will be helful.
While brushing I add the translate values to the x and y coordinates.
d3.event.translate
I am having trouble getting a grasp on how auto-layout constraints work. In theory, one should be able to add a label to the storyboard, then assign a horizontal centre constraint and it should be centred on all devices, correct? However, when I do that, it does NOT stay centred UNLESS I also add a vertical spacing constraint. However, if I test the app it IS centred (without the vertical spacing constraint). This is causing me great confusion.
Secondly, if I add a text input, expand it to full width, then add pin the left and right side, it does NOT maintain the pins in other views. And instead there is this dotted box inside a solid orange line box which is centred, but the element itself is not.
I am at a loss please help. I have attached a video of me doing it in Xcode. Both issues are in there First the centring issue, next to the pinning issue. Thank you!
VIDEO OF THE ISSUES HERE:
https://vid.me/XxFo
-- Red lines mean Constraints are ambiguous. Yellow means warning, Its show you the runtime demonstration of view.
View need four constraint to satisfy its full position.
x, y, width and height
When you give only center horizontally constraint, this is not enough you have to specify the y position as well. Label get its width and height from its text length and text font size.
Though constraints are ambiguous and in preview you are not getting correct result but once you give center constraint, it will be center at runtime.
Run the app and it should be in center horizontally.
I've got a stacked bar chart with legends, but depending on the data selected, it becomes unreadable because of the space added around the bars and the series and the fact that the outer horizontal axis label won't rotate. I've tried as many things as I can think of, but nothing alters the spacing or the rotation on the outer axis. Picture 1 gives you an idea of what I mean. Main thing that would probably help is the rotation. Using VS2012 but not inline code. Any help appreciated.
I'm trying to apply readable labels to a D3 Streamgraph that is rendered using completely dynamic data - various different datasets that are evolving over time from live data and the controls offered to manipulate what is shown too. All this works well - the problem is how to clearly label the streams - short of using a legend.
The great variation of hues and luminance needed makes choosing readable styling for labels that float over the graph extremely tricky, particularly with the limited SVG styling available cross platform and that the labels will inevitably overlap on the background sometimes too. For instance black coloured labels 'work' but it's hard to read sometimes over the top of darker colours (which we really need to ensure a good range)...
Anyone done anything similar/addressed same challenge? I'm currently pondering using a legend instead.
A couple of ideas may help:
Add a background rectangle around the text with opacity set to 0.7 (the color being the same as the data series). This helps make the text pop. For the border of the rectangle, use d3js rgb.darker or rbg.brighter.
var pathStroke = d3.rgb( item.color ).darker(1.4).toString()
For preventing overlapping labels, I can think of two solutions - both hard. Use d3js Force Layout or write your own layout code. We ended up writing our own layout code for tooltips in d3-traits. See tooltips.js and layout.js.
d3.trait.layout.verticalAnchorLeftRight( foci, self.chartRect())
layout.js does have some general purpose and very flexible layout routines. It will layout rectangles within a bounding box avoiding overlap and determines if the labels need to be left or right justified. If the origins of the rects are toward the right edge of the bounding box, they are right justified.
Please have a look at this page:
http://www.abhi.my/lab/3D-menu.html
If you haven't already guessed, I'm trying to emulate the new iOS notification animation (that's where I first saw it), and obviously, my two paltry div's aren't behaving like a full box...
Any idea what I'm doing wrong here...?
This is what I'd like to get close to: http://www.youtube.com/watch?v=pBgVbzBJqDc
You are only transforming you elements in 2d space, even though you are going for a 3d effect.
A working example:
http://jsfiddle.net/mrlundis/wU296/
The "bottom" span is positioned behind the "front" span by using translate3d(x,y,z) where y and z correspond to half of the elements height (it's rotated around it center point.) It should be possible to achieve the same effect using -webkit-transform-origin.
-webkit-transform-origin is also used to make sure the containing div rotates around it's center point on hover.