x-axis label overwritten in svg graph - javascript

I am working on a stacked barchart. Here is the codepen https://codepen.io/a166617/pen/NWvZGLd
As you can see in codepen, the x-axis label is overlapping each other and i am trying to make it at an angle so that they wont overlap each other. For e.g. this screenshot below
I tried to add transform: rotateX(90deg) as a style but it does not show properly. Here is the line of code where i added the above css
<text
x={125 + rowIndex * 60}
y={520}
textAnchor="middle"
style={{ fill: 'red',
fontSize: '13px',
transform: `rotateX(90deg)`
}}
>{entry.name}</text>
Can someone please let me know how to achieve this so that the x-axis label is clearly viewed.

Rotate transforms will rotate around the current origin. Which for SVGs defaults to the origin of the SVG. That is 0,0. Because your text is nowhere near (0, 0), your transform will rotate the text away from where you want it.
To avoid that you'll need to change the transform-origin before you rotate. Something like this:
<text
x={125 + rowIndex * 60}
y={520}
textAnchor="end"
style={{ fill: 'red',
fontSize: '13px',
transformOrigin: (125 + rowIndex * 60)+'px 520px',
transform: 'rotateZ(-45deg)'
}}
>{entry.name}</text>
I did it a slighlty different way in my updated answer to your previous question. I used the special version of rotate (rotate(angle,cx,cy)) that only the SVG transform attribute accepts. It includes an X,Y centre of rotation. For CSS, you have to use transform-origin.

Related

Highchart general drawing svg label zoom-in on mouse hover

I have a svg label which i am drawing using highchart general drawing. I want to know is there any way i can give an option for zoom in to that label on mouse hover.
Below is the code for label.
ren.label('PhantomJS', 210, 82)
.attr({
r: 5,
width: 100,
fill: colors[1]
})
.css({
color: 'white',
fontWeight: 'bold'
})
.add();
It depends on how the rest of your chart is built and what, if any, data live there.
Highcharts has a method to zoom to a specific point, but you need to define what that point is: https://api.highcharts.com/class-reference/Highcharts.Point#zoomTo. You're drawing a label after the chart has been rendered, so it's not part of the chart's data, and therefore, there's no "point" you can zoom to.
Another alternative you could try is triggering the setExtremes() function to update the chart axes and "zoom" in on a particular area of the chart (https://api.highcharts.com/class-reference/Highcharts.Axis%23setExtremes). See the linked fiddle in this Stack Overflow answer: https://stackoverflow.com/a/44875178/2596103. What they did here is use an HTML button that lives outside the chart vs. a rendered label.
You may want to consider annotations (https://api.highcharts.com/highcharts/annotations) and see whether they can get you the zoom feature you're seeking.
I hope this information is helpful.

fabricjs IText: overlapping character background-color making lines when semitransparent

I got a problem with ovelapping characters in my itext objects.
As shown in the image, the letter-backgrounds are somehow having a wrong offset or/and width.
I can't trace down the error. Maybe it's some css on my site, but i don't know how the css could affect the itext object.
This is how it looks like with object padding set to 0. The width exceeds the right boundary!
I have tried to reproduce the error in a fiddle, but off course with no success.
https://jsfiddle.net/FlemmingH/z74whhtn/
var canvas=new fabric.Canvas('canv');
var iTextSample = new fabric.IText('BOX', {
left: -200,
top: 20,
fontFamily: 'Helvetica',
fill: '#333',
lineHeight: 1.1,
styles: {
0: {
0: { textBackgroundColor: 'rgba(0,0,255,0.3)' , fontSize: 420 },
1: { textBackgroundColor: 'rgba(0,255,0,0.3)', fontSize: 420 },
2: { textBackgroundColor: 'rgba(255,0,0,0.3)', fontSize: 420 }
}
}
});
canvas.add(iTextSample);
EDIT 1 - Rounding-error in fabric.js ???
Ok, now the error is reproducible! Try to manually scale up this IText object: IText fiddle
It seems like there's kind of a rounding error getting visible when scaling up from a small font size (in the fiddle i used fontSize:20).
As shown in the picture below there's still an error even with a fontSize:120.
So is the only option to get around this by initializing the IText object with a big fontsize and then force the user to scale it down ?
Thank you for bringing this issue to the fabricjs issue tracker.
This is a bug.
I'm pushing a fix to solve it.
There is an extra 1px calculation in the width of the character.

How to apply an outline for a text in Raphael.js

I have a site for customize football jersey design. I'm using Raphael.js customization and I need to know how we can apply outline for a text in Raphael.
On searching, I got the suggestion of using the stroke property of Raphael. But this is not giving an outline effect. Stroke is actually Inline. When we increase stroke width, the width of the text will decrease.
How do I apply outline for a text in Raphael without reducing width of text?
Text before stroke :
Text after stroke:
Text needs to be like this on applying stroke/outline (just demo from photoshop):
Try this.
text.attr({
"font-size": 100,
"font-family": "Arial, Helvetica, sans-serif",
"stroke":"red",
"stroke-width":"5px",
"stroke-linecap": "square",
"stroke-linejoin": "bevel"});
"The paint-order attribute specifies the order that the fill, stroke, and markers of a given shape or text element are painted."
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order
What you want would be
var paper = Raphael("playarea", 500, 500);
var text = paper.text(200, 100, "RAPHAEL!!");
text.attr({ "font-size": 100, "font-family": "Arial, Helvetica, sans-serif", "stroke":"red", "stroke-width":"5px", "paint-order":"stroke"});
Dan, expanding on the example you gave
Beware for IE does not support
I just had this problem. An easy solution is to add the text twice at the same position. First add text in the color you want the stroke to be, and add your stroke. Then, add the text again with the desired fill color and no stroke. Adjust the stroke width on the first text element until you achieve the desired effect.

How to animate SVG group as a whole?

I am using Snap.svg to make animation. I have two elements (one circle and one ellipse) to draw currently. The elements will translate together and the ellipse also rotate and change shape. I can use Element.animate() function in Snap.svg to animate each element, but it is very tricky to keep them transform harmonically. So how can I animate the elements as a whole? The html snippet is put on https://gist.github.com/dongli/8124267.
PS: The attributes cx and cy of centroid are not updated after each animation frame. I expect them will be changed.
Thanks for any help!
Snap provides a group function (also a sets, but group is a proper svg element, so I think typically preferred). So you have one group element and and perform one transfer can do something like this...
var s = Snap(400,400);
var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red'});
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue', });
var g = s.group(r,c);
g.animate({ transform: 'r360,150,150' }, 1000, mina.bounce );
Working jsfiddle here. http://jsfiddle.net/n8Een/2/ . If you're still having problems, pop your code on a jsfiddle.

Highcharts.js - Background color of axis only

Thanks in advance for your time and help.
I'm using highcharts and need to set the background color of only the x and y axis. See attached:
So what I need is to set a background color on the x-axis that is different from the dark gray of the graph (right now they are obviously the same)
Does anyone know if this is possible and, if so, how to go about it? I've been through the highcharts API Highstock API extensively, but couldn't find anything specifically for this.
Thank you again for your time and help!
Rich
Did you try:
rendered a rectangle and positioned it to the bottom of the graph.
chart.renderer.rect(0/*position on X-axis*/, 275/*position on Y-axis*/, 680/*width*/ , 25/*height*/, 00)
.attr({
'stroke-width': 0,
stroke: '#888888',
fill: '#888888',
zIndex: 3
})
.add();
Read more: highchart renderer
x-asis does not have backgroundColor Set background color to HighChart xAxis labels
Hope this help.

Categories

Resources