I need to make a margin from the right side of the charts for the average line in Echarts (just like in the left side of it).
What way could it be implemented?
current chart state
Related
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
I'm using the new sunburst chart for a 2 level hierarchy [country,region] and it works great, but I have one issue:
the second band (region) is tiny compared to the first one (country). How to adjust the radius to it works better visually?
Trying to wrap my head around this particular use case of D3 v4 zooming. My example so far is available here:
http://bl.ocks.org/gmarler/f6d17432f6eea34318bff477eb9ebd27
I'm able to get my initial Partition Layout to draw as required (I've left out complexities such as text positioning and color), but I'm not getting very far with zooming properly.
The goal is to zoom whenever one of the svg rect elements is clicked on.
And by "zoom", I mean something somewhat different than the stated default behaviors:
Completely disable anything other than a click on an element - no drag, panning, or mouse wheel activity normally associated with D3 zoom.
When an svg rect element is clicked on, the element expands (or contracts) in the X dimension only, such that its left side abuts the left side of the top level svg's g container, and its right side abuts the right side of the top level svg's g container.
In other words, the element clicked on becomes exactly the width of the chart.
All other g/rect elements vertically "above" the clicked one should scale/translate appropriately.
All other elements vertically "below" the clicked one don't really need to change, as the one we've clicked on will take up 100% of the width of the chart container.
So, here's how far I've gone:
I've calculated the scaling factor (k) - not sure I've done it right. The goal is to set the scaling factor to whatever will make the width of the clicked element expand/contract to the width of the svg.
And I've calculated the transform for x (tx) to be whatever will cause the left side of the g element encapsulating the rect element to align with the left side of the svg.
Using k and tx, I create a zoom transform with d3.zoomIdentity.translate(tx, 0).scale(k)
Now I select all of the g elements that contain rects, tear the current transform="translate(x,y)" apart, and apply the zoom transform to the x portion of the translate - this should move the left side of the element to the left side of the svg
Next, I select the rect under each g element, and apply the zoom transform to the width attribute
This seems to get me closer to the end goal, but I'm sure I'm missing something:
Is it really necessary for me to tear apart the transform="translate(x,y)" the way I am for the g elements?
If I click on certain elements more than once, the scaling keeps increasing. I need to both:
Keep the original zoom ratio so that I can reset to it, or go back to it simply by clicking on the lowest rect element
If an element is clicked on, it's already at 100% width - I need to never allow scaling past 100% width
clicking on any given element the first time expands it to 100% width as expected, but not all elements' ancestors properly scale - I don't care if the the ancestors expand either end past the edge of the viewport, but some of the ancestor elements leave the viewport entirely, which I cannot account for.
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.
So I am using jqPlot to display distance (y-axis) over time (x-axis) in a simple line graph.
However, while I have actual distances as the underlying data used to position the points, I'm not interested in displaying those distances on the y-axis.
Instead, there are a series of landmarks at given distances, that I want to appear on the y-axis as a 'tick' next to the appropriate point for the distance to that landmark. That way the line appears to "pass" each landmark as it travels upward.
Currently I'm "faking" this by hiding the ticks and putting a manually-created series of labels next to the graph. This works well enough, but I had to disable vertical zooming because if the user chose to zoom in, the labels would not match up with the actual distances. My users would really like to zoom in vertically, however, and I want to allow them to.
Therefore, does anyone know of a way (a plugin or similar) that would allow me to associate custom labels with given tick marks in jqPlot, that will match up nicely and respond to zooming? It would be necessary to hide some of the landmarks if the graph is zoomed out too much, so that would have to be a feature.
Alternatively, if someone knows of a "zoom event" that passes in the min and max y values, I could probably recreate my manual labels with that data, so let me know if you know of a way to get that information. I haven't been able to find one.
I would need to see a bit of your code to customize it to the distance but to start with you could label the ticks and it will display over the size of the chart.
axes:{yaxis:{ticks:['DiscanceA','DiscanceB', 'DiscanceC', 'DiscanceD', 'DiscanceE'],
renderer: $.jqplot.CategoryAxisRenderer,},
Let me know how it goes and if you have any code lets see it!