By default, Highcharts fills horizontal legends with legend items from left to right, introducing a line break between items when the next item would overflow the legend's bounding box.
I would like to be able to control where such line breaks occur, so that (for example) instead of this:
I could visually group the "Target" and "Actual" items together, and then list the remaining series on subsequent lines like this:
Using useHTML and labelFormatter, I've tried a few different approaches involving <span>s, <div>s and styling to try to achieve this, but none of them have had any effect. The one approach I did manage to make work (from which I generated the second image above) is horribly kludgey, and probably can't be easily generalized for use in real code.
I'm thinking this ought to be a fairly simple thing to do, and I suspect that I'm merely overlooking some existing Highcharts feature that would do it.
Can someone point me in the right direction?
Related
We are looking to embed labels within edges in Cytoscape.js, reproducing edges that look like this.
We recently asked this as a feature request on the GitHub issues page but it seems like it's already possible.
Maxkfranz says that in order to get edge labels inside the edges with a small arrow indicating the direction the only thing that is needed is two items in the style properties for the edges:
text-background-color: white;
text-rotation: autorotate;
We tried this and it doesn't seem to work work, so were wondering if something was missing. Here is the code we are using.
Lines 83 and 84 show the fix that Maxkfranz suggested being applied, but it doesn't seem to be doing the trick. It is definitely possible that we are misunderstanding their reply, but I'm not sure where else the particular fix might go. Any suggestions would be appreciated.
Your text will always overlap the mid arrow. Mid arrows are intended as replacements to endpoint arrows. There's not much point to having both.
If stylistically you want to show an arrow beside the text, use a unicode triangle character (e.g. "\u25B6"). Shifting arrows will not be supported, as can be prohibitively expensive for bezier curve edges.
I am writing an animation using d3, and I cannot seem to find a way to easily ensure that a graphic always appears "behind" other graphics.
Specifically, I am dealing with lines and circles (imagine a directed graph), and it sort of looks bad to have some of the lines on top of the circles, and others underneath. Is there a way to set the z/depth of certain graphics, in this case my lines, manually? I apologize if this seems google-able, but I attempted typing "graphic depth d3" and other variations and got nothing.
EDIT : Accepted answer works, a more detailed description of the problem can be found here.
SVG doesn't have a z-index property or similar, the elements are drawn in the order in which they appear in the DOM -- elements higher up are drawn behind elements that have been added afterwards.
The easiest way to group elements into layers is to use g elements. So in your example, I would use two g groups, one for the lines and one for the circles. Add the g for the lines first and then all of the lines underneath it. If you then add the circles to the second g that you added afterwards, all circles will always be on top of all lines.
I'm planning to use Highstocks.js after having used Highcharts in some other projects and I've noticed that the labels when moving the mouse over a series are not the same as in Highcharts.js making it more difficult to be read.
Instead of showing only the information of the selected series, it shows the information of all of them in the same label.
This might be a bit confusing when there's multiple series as you have to pay attention to the color to identify the series name.
It doesn't even highlight the series you are currently over or anything to simplify the viewing to the final user.
You can see what I'm talking about with this two examples:
Highcharts.js (How I would like it)
Highstocks.js (How it actually is)
I'm wondering if there's anything which can be done to emulate that behavior. I've been taking a look at the series options but I didn't find anything similar.
Thanks.
Sure you can, it is very easy, just add:
shared: false
for tooltip options object on chart initialization.
fiddle: http://jsfiddle.net/5RGaC/
I have a page with 3 different charts. I'd like to make them look good. Here's what it looks like:
http://i.stack.imgur.com/JY0Yl.jpg
As you can see there are several problems with the formatting here.
How do I make the Y-axis labels align? In this case, they're right aligned, and the graph starts at the right. So, since the labels are different, each of the graphs starts in a different column.
How do i remove the first and last or the X-axis labels? In this case, two things happen. In one side, the label overlaps the Y-label, and on the other side, the label wraps around and uses two lines.
How do I space the graphs? Each graph is its own DIV container, and it's jqPlot that decides to format it, and overrides my DIV formatting.
For point 3 you may be able to place each div inside an additional div that you will be able to format with CSS as you want. And if it work you may reuse your hide X axis solution with a better result.
I need a JavaScript/HTML5 Library to achieve the following requirement which nodes in the same level (1 and 2 ) should be positioned in two different locations [as per another data attribute.]
I look though lot of libraries but coundnt not achieve this , any ideas on directly or indirectly achieve this ?
You have two options:
1. You create two item templates, the first one must have an extra space at the bottom. And Items should be aligned to bottom, so it would create affect that your first item raised inside of row.
2. You need to create explicit collection of rows and set their minimal height. And then align every item vertically.
In general I consider it is wasting of screen space. You can achieve the same affect by colors, border width, shadows etc without wasting pressures screen space. It looks like you are trying to mimic paper org chart in your application and it is wrong from my perspective.