Comments (11)
You can animate any value-based (number, percent or color) via animate()
method:
https://www.amcharts.com/docs/v5/concepts/animations/#Animating_settings
It supports a lot of settings, including tween functions, etc. So you might not need D3 animations after all.
If you absolutely need D3, you will need to create your own functions that iterate step through frames, request value from D3 animation functions, and set a relative setting on an amCharts object or dataitem.
In this case, updating valueX
on an axis range data item should update its position.
from amcharts5.
I do not see how to that with animate(), I need to tween the number part of the axis range label from zero to its final state
currently am using this code to achieve styling of label
setTimeout(() => {
chartConfig.current.range.get("label").adapters.add("html", (html, target) => {
return `<div style="text-align: center;">
<h2>
${superLabelPrefix ?? getListsTitle(resolution, "Last")}
<br />
<strong>
<span style="color: ${blinkColor}">${superlabel}</span>
</strong>
</h2>
</div>`;
});
}, timeout);
from amcharts5.
rangeDataItem.animate({
key: "value",
to: value,
duration: 3000,
easing: am5.ease.inOut(am5.ease.elastic)
});
from amcharts5.
This would animate the range itself , but i need to animate the label value of the range, and not the range.
when using animate there i get
Type '"value"' is not assignable to type 'keyof IAxisLabelSettings
In my case label is html.
example:
Snimka.2024-04-30.123531.mp4
This is working fine in amcharts version 3, but now I am migrating to version 5 and this is the last step :(
from amcharts5.
I can't quite make it. In the video, is what you had in v3 or what you have so far in v5? 🤔
Can you post what you have so far on CodePen or jsFiddle?
from amcharts5.
In the video it is amcharts 3, where I use a selector and d3 to tween,
I added the html label dynamically with absolute positioning after getting the guides position
const guides = document.querySelectorAll(
".amcharts-guide-fill.amcharts-guide-fill-guide-value"
)[0]
...
const animateSuperLabel = (
superLabelSelectString: string,
prevSuperLabel: string,
superLabel: string
) => {
select(superLabelSelectString)
.transition()
.duration(2500)
.tween("text", tweenText(prevSuperLabel, superLabel));
};
const tweenText = (prevValue: string, newValue: string) => {
return () => {
const i = interpolateRound(prevValue, newValue);
return function (t) {
this.textContent = format(",")(i(t)).replace(/,/g, ".");
};
};
now in AMcharts 5 I can't use no selectors because everything is in canvas
from amcharts5.
Gotcha. Thanks.
Why can't you do the same to amCharts 5 label? I.e. set chartConfig.current.range.get("label").set("html", ......)
from amcharts5.
how exactly ?
from amcharts5.
Well, you animate a value using D3 (sorry, it's beyond our scope of support) then just set label's html
setting with the value being animated.
from amcharts5.
Related Issues (20)
- Logarithmic scale not showed completely HOT 3
- Zoom property doesn't hold the zoom state of the chart in the GapelessDateAxis. HOT 2
- Tooltip doesn't work properly with no grouping and base interval set to 5 min HOT 4
- yAxis doesn't show values below 1e-5 on logarithmic scale HOT 1
- Is it possible to fix chart crashing for mobile devices if set useSafeResolution as false? HOT 9
- Compressed grid lines on logarithmic yAxis HOT 1
- Bug when loading the Map with specific geojson HOT 10
- DateRangeSelector not inheriting timezone from root HOT 8
- 'EventDispatcher is disposed' error when refreshing bullets containing PieCharts HOT 5
- Bug : Custom Indicator doesn't work with Series Switcher HOT 5
- Settings button visible, even after disabling it. HOT 1
- Draw tools cut off / do not show scrollbar when longer than div HOT 2
- Setting Timezone to the root causes error HOT 1
- How do I prevent the forceDirected from going out of bounds? HOT 2
- Amcharts 5 - Horizontal scrollbar resets to random indexes HOT 1
- Labels in Responsive HOT 5
- Bellcurve in v5 HOT 1
- Overlapping charts when using the opposite option HOT 3
- What is the best way to apply theme in stock Charts HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from amcharts5.