Comments (10)
XYSeries
does not have strokes
, LineSeries
does. You should type your code so the compiler knows you're dealing with a LineSeries
.
from amcharts5.
here is the full useLayoutEffect
this is fully based off of the example at https://www.amcharts.com/demos/highlighting-line-chart-series-on-legend-hover/
is this incorrect as an example then? I see that it uses am5xy.LineSeries
but still defaults to XYSeries
when it when built
is there something incorrect in this useLayoutEffect?
instead of importing everything as * i am importing as
import {
Legend,
Root,
Scrollbar,
Theme,
Tooltip,
color,
p100,
percent,
time,
} from "@amcharts/amcharts5";
import {
AxisRendererX,
AxisRendererY,
DateAxis,
LineSeries,
ValueAxis,
XYChart,
XYCursor,
} from "@amcharts/amcharts5/xy";
useLayoutEffect(() => {
/* Chart code */
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
let root = Root.new("chartdiv");
const myTheme = Theme.new(root);
myTheme.rule("AxisLabel", ["minor"]).setAll({
dy: 1,
});
myTheme.rule("Grid", ["x"]).setAll({
strokeOpacity: 0.05,
});
myTheme.rule("Grid", ["x", "minor"]).setAll({
strokeOpacity: 0.05,
});
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root), myTheme]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
let chart = root.container.children.push(
XYChart.new(root, {
panX: true,
panY: true,
wheelX: "panX",
wheelY: "zoomX",
maxTooltipDistance: 0,
pinchZoomX: true,
})
);
let date = new Date();
date.setHours(0, 0, 0, 0);
let value = 100;
function generateData() {
value = Math.round(Math.random() * 10 - 4.2 + value);
time.add(date, "day", 1);
return {
date: date.getTime(),
value: value,
};
}
function generateDatas(count: number) {
let data = [];
for (var i = 0; i < count; ++i) {
data.push(generateData());
}
return data;
}
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
let xAxis = chart.xAxes.push(
DateAxis.new(root, {
maxDeviation: 0.2,
baseInterval: {
// if time breakdown changes
timeUnit: "month",
count: 1,
},
renderer: AxisRendererX.new(root, {
minorGridEnabled: true,
}),
tooltip: Tooltip.new(root, {}),
})
);
let yAxis = chart.yAxes.push(
ValueAxis.new(root, {
renderer: AxisRendererY.new(root, {}),
})
);
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
for (var i = 0; i < 10; i++) {
let series = chart.series.push(
LineSeries.new(root, {
name: "Series " + i,
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value",
valueXField: "date",
legendValueText: "{valueY}",
tooltip: Tooltip.new(root, {
pointerOrientation: "horizontal",
labelText: "{valueY}",
}),
})
);
date = new Date();
date.setHours(0, 0, 0, 0);
value = 0;
let data = generateDatas(100);
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
}
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
let cursor = chart.set(
"cursor",
XYCursor.new(root, {
behavior: "none",
})
);
cursor.lineY.set("visible", false);
// Add scrollbar
// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
chart.set(
"scrollbarX",
Scrollbar.new(root, {
orientation: "horizontal",
})
);
chart.set(
"scrollbarY",
Scrollbar.new(root, {
orientation: "vertical",
})
);
// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
let legend = chart.rightAxesContainer.children.push(
Legend.new(root, {
width: 150,
paddingLeft: 15,
height: percent(100),
})
);
// When legend item container is hovered, dim all the series except the hovered one
legend.itemContainers.template.events.on("pointerover", function (e) {
let itemContainer = e.target;
// As series list is data of a legend, dataContext is series
let series = itemContainer.dataItem?.dataContext;
chart.series.each(function (chartSeries) {
if (chartSeries != series) {
// errors here because chartSeries is seen as XYSeries
chartSeries.strokes.template.setAll({
strokeOpacity: 0.15,
stroke: color(0x000000),
});
} else {
// @ts-ignore
chartSeries.strokes.template.setAll({
strokeWidth: 3,
});
}
});
});
// When legend item container is unhovered, make all series as they are
legend.itemContainers.template.events.on("pointerout", function (e) {
let itemContainer = e.target;
let series = itemContainer.dataItem?.dataContext;
chart.series.each(function (chartSeries) {
// @ts-ignore
chartSeries.strokes.template.setAll({
strokeOpacity: 1,
strokeWidth: 1,
stroke: chartSeries.get("fill"),
});
});
});
legend.itemContainers.template.set("width", p100);
legend.valueLabels.template.setAll({
width: p100,
textAlign: "right",
});
// It's is important to set legend data after all the events are set on template, otherwise events won't be copied
legend.data.setAll(chart.series.values);
return () => {
root.dispose();
};
}, []);
from amcharts5.
Try adding code hint:
chart.series.each(function (chartSeries: am5xy.LineSeries) {
...
}
from amcharts5.
![image](https://private-user-images.githubusercontent.com/72581075/333062449-e70750a4-5b88-420a-ab75-1d688faaf07a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk3NDg4MDAsIm5iZiI6MTcxOTc0ODUwMCwicGF0aCI6Ii83MjU4MTA3NS8zMzMwNjI0NDktZTcwNzUwYTQtNWI4OC00MjBhLWFiNzUtMWQ2ODhmYWFmMDdhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjMwVDExNTUwMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTNhZDZhMzM5MmM4N2Q0ZWRiMDM3OGI3ZDRiY2I5ZDRiYmZmN2NlMWEyMzZlOWEyZDZhZDZkYjFhYzk3Y2I3YzUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.1bju8TwEC3vUUX03GyZ1E_dyvfxf-2FOpgblMg8sNdg)
![image](https://private-user-images.githubusercontent.com/72581075/333062504-6401caf1-fd62-4167-a654-4ab8d7258ee4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk3NDg4MDAsIm5iZiI6MTcxOTc0ODUwMCwicGF0aCI6Ii83MjU4MTA3NS8zMzMwNjI1MDQtNjQwMWNhZjEtZmQ2Mi00MTY3LWE2NTQtNGFiOGQ3MjU4ZWU0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjMwVDExNTUwMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ1ZDNjNDZkMDJmNWIyOWNmMGU2YzYxMmU5OGQ0ZDAyNDgzMmZkOTY4NzQxY2M4OTAxNDUwNDdhN2IzZDIwNTgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.CgGZMmOTpmBFwjL4_ZsdK_sSpal7zhcxVTVyeU0Tt7E)
from amcharts5.
OK, in that case you can implement a check like this:
if (series.isType<am5xy.LineSeries>("LineSeries")) {
series.strokes.template.setAll({
//
});
}
It'll result in better code since it will prevent on accessing strokes
on non-LineSeries objects.
from amcharts5.
is there a disconnect to knowing which series is contained in the chart? I am fully going based off of an example in the docs and this isn't something that has been specified.
thanks you for the help. Just was hoping this would be a little more type safe without type guards
from amcharts5.
TS is not smart enough to deduct that you only add LineSeries
to chart's series, hence you have to provide hints.
from amcharts5.
could you point me to any documentation that would show these types of castings? I am worried I may run into other scenarios where the types specified are not accurate to what they could be.
![image](https://private-user-images.githubusercontent.com/72581075/333282004-811f943a-b5c1-4bc4-a20f-57b42987c3f0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk3NDg4MDAsIm5iZiI6MTcxOTc0ODUwMCwicGF0aCI6Ii83MjU4MTA3NS8zMzMyODIwMDQtODExZjk0M2EtYjVjMS00YmM0LWEyMGYtNTdiNDI5ODdjM2YwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjMwVDExNTUwMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTlmMTJhNGY3OWU2M2VhN2QwYjc3OWI5ODhkYTVlZTNmNzYzOWVhN2UyOWRmZTg0NTU5Y2NlZjg1NDA3ZWIwYTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.WAoo-ImGC7qNuLxOEUNqCgT1CbKEy1cEi4nch4Zuk0g)
TS allows the ability to specify multiple types but each case needs to be handled as needed. type casting is a faster version but depending on requirements and differences between these two, it could lead to other problems.
from amcharts5.
There's no documentation that would list all those cases, I'm afraid.
There's a classref:
https://www.amcharts.com/docs/v5/reference/tag/class/
For the most part TS can derive proper types. Some niche cases like the above would require code hinting.
from amcharts5.
This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.
from amcharts5.
Related Issues (20)
- How do I get Korean region geoJson data from a map chart?
- Mutli Date Axis with different date ranges for each date axis HOT 13
- How to handling jagged pie charts slices and spotty area line charts HOT 7
- Is it possible to transform all move-, wheelβ and scroll-events to passive? HOT 1
- Congressional map
- Tooltip on DateAxis HOT 9
- how to handling dataItem in labels template setup HOT 2
- DateAxis Labels overlapping HOT 1
- heatmap with huge dataset HOT 2
- The Chrome browser is using more than 1 gigabyte of memory. HOT 1
- What event signals that the chart is finished rendering? HOT 1
- Unable to sync the cursor in multi-series in stock chart HOT 3
- Column Series not spanning the length of a Date Axis HOT 2
- How to add text to the last date axis label value ? HOT 3
- Heat Rules not working on Polar HOT 2
- Add Scatter plot to stock chart HOT 3
- ENHANCEMENT Request : Comparison Series with new price scale HOT 2
- ZoomControl buttons hover colour not getting changed #amcharts5 HOT 3
- Tooltip background colour getting removed after initial hover #amcharts5 HOT 4
- Overlapping charts in the same Root 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.