I did Lottie animation by using Lottie-web and now trying to change the color dynamically so I used Lottie API(https://github.com/bodymovin/lottie-api). In that, I got the keyPath for changing the color but don't know how to change the color of an object.
This is the code for creating the lottie object animation
var animData = {
container: animationContainer,
renderer: "canvas",
loop: true,
autoplay: true,
rendererSettings: {
preserveAspectRatio: "xMidYMid meet"
},
path: "https://labs.nearpod.com/bodymovin/demo/chameleon/chameleon2.json"
};
anim = lottie.loadAnimation(animData);
for changing the color of a Lottie JSON I used
animationAPI.getKeyPath(
"#leaf_3,Contents,color_group,fill_prop,Color"
);
I got the path of an object but now I don't know how to change the color so Kindly help me if anyone knows?
The easiest way to make the color dynamic for a shape in Lottie is to rename your "Stroke 1" or "Fill 1" in After Effects to "#somename". After exporting, you can reference that shape in your CSS like this:
#somename {
stroke: red;
/*or*/
fill: red;
}
You can use lottie-colorify package to change animation colors:
const animation = Lottie.loadAnimation({
container: container.current,
animationData: colorify(['#ef32d0', [50, 100, 200], '#fe0088'], SomeAnimation),
});
Related
That is the thing, i'm creating a shape that covers all canvas to act like a white background, i have a transformer and im listening to canvas clicks, inside it im adding objects into transformer nodes, but i don't like to transform the white shape that im using as a background.
Canvas white Shape
Just don't add transformer into it. I see several solutions:
Set listening = false on that background shape. In that case, it will not trigger any mouse/touch/pointer events
Or set a special name for it in just ignore in click callback
const background = new Konva.Rect({
fill: 'white',
width: stage.width(),
height: stage.height(),
name: 'nonSelectable'
});
stage.on('click', (e) => {
// ignore such shape
if (e.target.hasName('nonSelectable')) {
return;
}
// else attach transformer
});
I have created a HighChart in a Ag data grid cell. On hovering over the Line chart, I need to display a tooltip with few details. I am able to show the tooltip within the cell, but as the tooltip is displayed within the cell, the content gets hidden in the cell. I need to display the tooltip in such a way that it can overlap and display the tooltip over another cell.
I tried setting the z-index to 99999 & position as relative/absolute of highchart tooltip. But it does not reflect.
Tried to override the css class .highcharts-tooltip by adding z index
Please can some css expert help me identify the issue?
There is no need to modify the CSS of the highchart tooltip.I followed the properties used in the below URL & it worked for me:
https://www.highcharts.com/demo/sparkline
I had missed out adding below chart options:
tooltip: {
outside: true,
}
plotOptions: {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 1,
states: {
hover: {
radius: 2
}
}
},
fillOpacity: 0.25
}
}
In this fiddle what I'm after is giving all the 0s in the YAxis a grey colour without affecting the numbers that are bigger than 0. The issue here is that they are contained in the same SVG tag: <tspan>3000</tspan>. Is there a way I can target a particular text value inside a tag using css? i.e.
tspan[0]{
color: #808080;
}
Or is there a way I can do that using Highcharts' yAxis.labels.formatter ?
This is totally hacky, but I got it to work. Under yaxis:
labels: {
formatter: function () {
var label = this.axis.defaultLabelFormatter.call(this);
label = label.replace(/(0+$)/,'<span style="color: #ccc;">$1</span>');
return label;
}
},
I'm working with nvd3 and I'm not much hands-on with its styling (css properties) to customize it. I have a line chart with two data lines on it.
The code for drawing the lines is following:
nv.addGraph(function() {
chart = nv.models.lineChart();
chart.margin({
left : 100,
bottom : 100
}).useInteractiveGuideline(true).showLegend(true).duration(250);
chart.xAxis.axisLabel("Date").tickFormat(function(d) {
var date = new Date(d);
return d3.time.format("%b-%e")(date);
});
chart.yAxis.axisLabel('').tickFormat(d3.format(',.2f'));
chart.showXAxis(true);
d3.select('#startupRiskLineChart').datum(
prepareDataObj(val1_y, val1_x, val2_y, val1_x))
.transition().call(chart);
;
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) {
nv.log('New State:', JSON.stringify(e));
});
return chart;
});
Is there any way to fill the area under data line with a lighter color?
Any help would be highy apperiated.
To get a line chart with a filled area in a specific color:
Add area: true to the data series, as in this example.
Add this CSS: .nv-area { fill: red }
The opacity of the area is set to 0.5, so filling it with red will actually make it pink:
chart.color(["red","yellow","blue"]);
'#00FFFF','#0FF','cyan' all are valid ways to set colors
Another way is set it in data itself
[{
values:[{x:1,y:1},{x:2,y:4},{x:3,y:9},{x:4,y:16}],
key: 'not a Sine Wave',
color: '#ff7f0e' //color - optional: choose your own line color.
}]
duplicate question i guess
Add
classed: "my-custom-approx-line"
to config of specific line and add styling:
&.nv-area {
fill-opacity: 0.2;
}
As of commit #becd772
Use .nv-group{ fill-opacity: 1.0 !important; } to fill the area with the same color as the line
I am using Highmaps in one of my web based application. Until now it was easy to modify it according to my use case but now i need to changes the border color of the region and i am unable to do it.
Code i have tried but failed:
chart: {
plotBorderColor: '#ffffff',
borderColor: "#ffffff",
}
See attached image what i want to achieve
Want to change the outline color to white
http://jsfiddle.net/qLen614m/
You can use the stroke attribute of the path element:
path {
stroke: white;
}
There is an options to set border color for map series. It is borderColor and it should be set in series.
series : [{
borderColor: 'white',
...
API link
Example: http://jsfiddle.net/qLen614m/1/
You should use borderWidth property for series.
The border width of each map area.
series: [{
borderWidth: 2
}]
Here is the official demo.