I'm sorry if the question is a bit off, I'm very new to Angular and TypeScript. So I'm making a graph with ngx-echarts, and there's this object/type EChartsOptions, where all the configuration for the chart is defined. for the Y and x axis properties, theres an axislabel property which has formatter functions built-in so that the given date object gets formatted into the given format:
xAxis: {
type: 'time',
axisLabel: {
formatter: function () {
return '{dd}-{MM}-{yyyy} {hh}:{mm}';
}}
},
Which is really useful and perfect. Now in the graph there's also a DataZoom object, which basically controls the zooming of the graph and supplies a slider in the bottom. On each end of the slider there's a date defined, date of the first and last value. These dates I also want formatted. Now in this DataZoom property there's a labelFormatter property, which is not able to format the date like the previous formatter. I could write some custom code or use a library to achieve my desired formatting of the date, but much rather I would like to use the exact same functionality as in the y and x axis properties. This is however where I'm stuck. How can I access the formatter functionality from EChartsOption.yAxis.axisLabel.formatter in EChartsOption.DataZoom ? I've tried to just use formatter in a JS example and there it works. But when I try it in TS, I get this error:
dataZoom: [
{
type: 'slider',
moveOnMouseMove: true,
formatter: function () {
return '{dd}-{MM}-{yyyy} {hh}:{mm}';
}},
Type '{ type: string; show: true; start: number; end: number; moveOnMouseMove: true; formatter: () => string; }' is not assignable to type 'DataZoomComponentOption'.
Object literal may only specify known properties, and 'formatter' does not exist in type 'DataZoomComponentOption'.ts(2322)
Please let me know if I need to clarify anything. This project uses Angular and Nebular for the graphs, but I feel like this question is a TypeScript issue and not necessarily Angular or Nebular related.