You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by "Sathe, Chaitanya" <CS...@thegoldensource.com> on 2021/04/06 13:54:15 UTC

Stack Overflow Question : Apache Echart, how to override axis label values with user defined map

Hi Dev,

I am struggling here
Any help, will really appreciate

Apache Echart, how to override axis label values with user defined map
https://stackoverflow.com/q/66964489/2806822?sem=2

Thank you
Chaitanya


Re: Stack Overflow Question : Apache Echart, how to override axis label values with user defined map

Posted by Ovilia <ov...@gmail.com>.
Hi,

You can use a callback function for axisLabel.interval[1], formatter[2] and
axisTick.interval[3].

[1] https://echarts.apache.org/en/option.html#xAxis.axisLabel.interval
[2] https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter
[3] https://echarts.apache.org/en/option.html#xAxis.axisTick.interval

Thanks

*Ovilia*


On Thu, May 6, 2021 at 4:35 PM Sathe, Chaitanya <CS...@thegoldensource.com>
wrote:

> HI Dev,
>
>
>
> Have created  a demo here,
>
> https://codesandbox.io/s/crazy-http-wzo8e?file=/src/CustomAxisLabel.js
>
> Just to summarize again
>
>
>
> *Problem Statement- *
>
> We need to plot Price vs Tenor line graph,
>
> -          Not at equidistance
>
> -          Custom axis label  for given axis value
>
>
>
> *Example -*
>
> *Data - *
>
> This is a sample data where Tenor_label_value is used to display purpose
> only while Tenor_day_value is used for plotting at relative distance
>
>
>
> Price
>
> Tenor_day_value
>
> Tenor_label_value
>
> 222
>
> 30
>
> 1M
>
> 232
>
> 60
>
> 2M
>
> 253
>
> 120
>
> 4M
>
> *Custom Map - *
>
> There is a custom map that client defines in database ( Used property file
> in a demo to simplify)
>
> Tenor_day_value
>
> Tenor_label_value
>
> 1M
>
> 30
>
> 2M
>
> 60
>
> 3M
>
> 90
>
> 4M
>
> 120
>
> 5M
>
> 150
>
>
>
>
>
> So to plot axis at exact distance ( type=value) ,
>
> Ø  plot point on price, Tenor_day_value
>
> Ø  access map and get the axis label from map for given Tenor_day_value
>
>
>
> Please Note -
>
>
>
> We have migrated Chart features from VaadinCharts to Apache Echarts
>
> 75% of the usecases are successful
>
>
>
> This is the priority feature for business , Switching back to Vaadin is
> the last and only resort
>
> We really appreciate any help in this regard
>
>
>
> Thanks much
>
> Chaitanya
>
>
>
>
>
>
>
> *From:* Sathe, Chaitanya
> *Sent:* Wednesday, May 5, 2021 11:24 AM
> *To:* Khandekar, Amol <AK...@thegoldensource.com>
> *Subject:* FW: Stack Overflow Question : Apache Echart, how to override
> axis label values with user defined map
>
>
>
> FYR
>
>
>
> *From:* Sathe, Chaitanya
> *Sent:* Wednesday, April 7, 2021 2:00 PM
> *To:* Ovilia <ov...@gmail.com>
> *Cc:* dev <de...@echarts.apache.org>
> *Subject:* RE: Stack Overflow Question : Apache Echart, how to override
> axis label values with user defined map
>
>
>
> HI Ovilia
>
>
>
> Thanks for the quick reply
>
>
>
> We are using Echarts(4.8), have gone through the checkout earlier.
>
> I will also share demo link as requested
>
>
>
> Regards
>
> Chaitanya
>
>
>
> *From:* Ovilia [mailto:oviliazhang@gmail.com <ov...@gmail.com>]
> *Sent:* Wednesday, April 7, 2021 12:53 PM
> *To:* Sathe, Chaitanya <CS...@thegoldensource.com>
> *Cc:* dev <de...@echarts.apache.org>
> *Subject:* Re: Stack Overflow Question : Apache Echart, how to override
> axis label values with user defined map
>
>
>
> CAUTION: This email originated from outside of the organization. Do not
> click links or open attachments unless you recognize the sender and know
> the content is safe.
>
>
>
> Hi Chaitanya,
>
>
>
> ECharts 3 is quite an old version. If you would like to try ECharts 5, we
> have a
>
> more powerful formatter for time axes. Checkout [1] for more information.
>
>
>
> Otherwise, we may need more information to help us understand your
>
> problem. You probably need to provide an online demo for us to reproduce
>
> like https://codepen.io/Ovilia/pen/dyYWXWM or
>
> https://codesandbox.io/s/mystifying-bash-2uthz.
>
>
>
> [1] https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter
>
>
>
> Thanks
>
>
>
> *Ovilia*
>
>
>
>
>
> On Tue, Apr 6, 2021 at 10:27 PM Sathe, Chaitanya <
> CSathe@thegoldensource.com> wrote:
>
> Hi Dev,
>
> I am struggling here
> Any help, will really appreciate
>
> Apache Echart, how to override axis label values with user defined map
> https://stackoverflow.com/q/66964489/2806822?sem=2
>
> Thank you
> Chaitanya
>
>

RE: Stack Overflow Question : Apache Echart, how to override axis label values with user defined map

Posted by "Sathe, Chaitanya" <CS...@thegoldensource.com>.
HI Dev,

Have created  a demo here,
https://codesandbox.io/s/crazy-http-wzo8e?file=/src/CustomAxisLabel.js
Just to summarize again

Problem Statement-
We need to plot Price vs Tenor line graph,

-          Not at equidistance

-          Custom axis label  for given axis value

Example -
[cid:image001.png@01D7427D.EF29D3C0]
Data -
This is a sample data where Tenor_label_value is used to display purpose only while Tenor_day_value is used for plotting at relative distance

Price
Tenor_day_value
Tenor_label_value
222
30
1M
232
60
2M
253
120
4M
Custom Map -
There is a custom map that client defines in database ( Used property file in a demo to simplify)
Tenor_day_value
Tenor_label_value
1M
30
2M
60
3M
90
4M
120
5M
150


So to plot axis at exact distance ( type=value) ,

Ø  plot point on price, Tenor_day_value

Ø  access map and get the axis label from map for given Tenor_day_value

Please Note -

We have migrated Chart features from VaadinCharts to Apache Echarts
75% of the usecases are successful

This is the priority feature for business , Switching back to Vaadin is the last and only resort
We really appreciate any help in this regard

Thanks much
Chaitanya



From: Sathe, Chaitanya
Sent: Wednesday, May 5, 2021 11:24 AM
To: Khandekar, Amol <AK...@thegoldensource.com>
Subject: FW: Stack Overflow Question : Apache Echart, how to override axis label values with user defined map

FYR

From: Sathe, Chaitanya
Sent: Wednesday, April 7, 2021 2:00 PM
To: Ovilia <ov...@gmail.com>>
Cc: dev <de...@echarts.apache.org>>
Subject: RE: Stack Overflow Question : Apache Echart, how to override axis label values with user defined map

HI Ovilia

Thanks for the quick reply

We are using Echarts(4.8), have gone through the checkout earlier.
I will also share demo link as requested

Regards
Chaitanya

From: Ovilia [mailto:oviliazhang@gmail.com]
Sent: Wednesday, April 7, 2021 12:53 PM
To: Sathe, Chaitanya <CS...@thegoldensource.com>>
Cc: dev <de...@echarts.apache.org>>
Subject: Re: Stack Overflow Question : Apache Echart, how to override axis label values with user defined map

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

Hi Chaitanya,

ECharts 3 is quite an old version. If you would like to try ECharts 5, we have a
more powerful formatter for time axes. Checkout [1] for more information.

Otherwise, we may need more information to help us understand your
problem. You probably need to provide an online demo for us to reproduce
like https://codepen.io/Ovilia/pen/dyYWXWM or
https://codesandbox.io/s/mystifying-bash-2uthz.

[1] https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter

Thanks

Ovilia


On Tue, Apr 6, 2021 at 10:27 PM Sathe, Chaitanya <CS...@thegoldensource.com>> wrote:
Hi Dev,

I am struggling here
Any help, will really appreciate

Apache Echart, how to override axis label values with user defined map
https://stackoverflow.com/q/66964489/2806822?sem=2

Thank you
Chaitanya

RE: Stack Overflow Question : Apache Echart, how to override axis label values with user defined map

Posted by "Sathe, Chaitanya" <CS...@thegoldensource.com>.
HI Ovilia

Thanks for the quick reply

We are using Echarts(4.8), have gone through the checkout earlier.
I will also share demo link as requested

Regards
Chaitanya

From: Ovilia [mailto:oviliazhang@gmail.com]
Sent: Wednesday, April 7, 2021 12:53 PM
To: Sathe, Chaitanya <CS...@thegoldensource.com>
Cc: dev <de...@echarts.apache.org>
Subject: Re: Stack Overflow Question : Apache Echart, how to override axis label values with user defined map

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

Hi Chaitanya,

ECharts 3 is quite an old version. If you would like to try ECharts 5, we have a
more powerful formatter for time axes. Checkout [1] for more information.

Otherwise, we may need more information to help us understand your
problem. You probably need to provide an online demo for us to reproduce
like https://codepen.io/Ovilia/pen/dyYWXWM or
https://codesandbox.io/s/mystifying-bash-2uthz.

[1] https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter

Thanks

Ovilia


On Tue, Apr 6, 2021 at 10:27 PM Sathe, Chaitanya <CS...@thegoldensource.com>> wrote:
Hi Dev,

I am struggling here
Any help, will really appreciate

Apache Echart, how to override axis label values with user defined map
https://stackoverflow.com/q/66964489/2806822?sem=2

Thank you
Chaitanya

Re: Stack Overflow Question : Apache Echart, how to override axis label values with user defined map

Posted by Ovilia <ov...@gmail.com>.
Hi Chaitanya,

ECharts 3 is quite an old version. If you would like to try ECharts 5, we
have a
more powerful formatter for time axes. Checkout [1] for more information.

Otherwise, we may need more information to help us understand your
problem. You probably need to provide an online demo for us to reproduce
like https://codepen.io/Ovilia/pen/dyYWXWM or
https://codesandbox.io/s/mystifying-bash-2uthz.

[1] https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter

Thanks

*Ovilia*


On Tue, Apr 6, 2021 at 10:27 PM Sathe, Chaitanya <CS...@thegoldensource.com>
wrote:

> Hi Dev,
>
> I am struggling here
> Any help, will really appreciate
>
> Apache Echart, how to override axis label values with user defined map
> https://stackoverflow.com/q/66964489/2806822?sem=2
>
> Thank you
> Chaitanya
>
>