Looking for a way to show the Y-axis value in the legend

[Aruna]

Hi,

I'm looking for a way to show the Y-axis value in the legend instead of using tooltips. I haven't been able to find such an example. Any assistance would be greatly appreciated.

Also I'm looking forward to achieve this in dynamic charts as in this sample.

https://stackblitz.com/edit/github-hcmejw-qyywho?file=src%2Fapp.component.html

Thanks!

[Nishanthi Panner Selvam]

Aruna,

Greetings from Syncfusion.

We have analyzed your query based on that, we have created a sample using an HTML div. This div contains text representing Y-values, and we've dynamically updated this text using the Y-value obtained through sharedTooltipRender event.

We have attached code-snippet, sample and GIF for your reference.

Code-snippet:

<div id="tooltipValuesParagraph">

        <span class="tooltip-line">

            <svg height="10" width="40" style="margin-right: 10px; margin-top: 10px;">

                <rect width="40" height="2" style="fill:#8ae1d9;stroke-width:1;stroke:#8ae1d9" />

            </svg>

            <p>S-Attempts - {{ sAttempts }}</p>

        </span>

        <span class="tooltip-line">

            <svg height="10" width="40" style="margin-right: 10px; margin-top: 10px;">

                <rect width="40" height="2" style="fill:#868687;stroke-width:1;stroke:#868687" />

            </svg>

            <p>S-Success - {{ sSuccess }}</p>

        </span>

        <span class="tooltip-line">

            <svg height="10" width="40" style="margin-right: 10px; margin-top: 10px;">

                <rect width="40" height="2" style="fill:#a1c2e9;stroke-width:1;stroke:#a1c2e9" />

            </svg>

            <p>S-SuccessRate - {{ sSuccessRate }}</p>

        </span>

    </div>

    sharedTooltipRender(args: any) {

        for (let i = 0; i < args.text.length; i++) {

            const value = this.extractNumericValue(args.text[i]);

            this[`s${i === 0 ? 'Attempts' : i === 1 ? 'Success' : 'SuccessRate'}`] = `${value}`;

        }

    }

  private extractNumericValue(text: string): string {

        const regexResult = /: (\d+)$/.exec(text);

        return regexResult ? regexResult[1] : '';

    }

Sample: https://stackblitz.com/edit/github-hcmejw-fmmwbn?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fapp.module.ts

Kindly revert us if you have any concerns.

Regards,

Nishanthi

Attachment: Chart_(6)_7ee94992.zip

[Aruna]

Hi Nishanthi,

Thank you for the provided solution. While implementing it in my use case, I encountered the following issues:

• Is it possible to dynamically add HTML div within each chart element? I aim to display the y-values of each chart in its legend, where the legend is represented by an HTML
  . Please note that the charts are dynamically generated based on data from Chart objects.
• Additionally, considering that the chart series list also bound to data source, how can I utilize sharedTooltipRender to achieve the above requirement without defining a fixed set of variables in the TypeScript file?

Alternatively, what about updating actual chart legend labels by appending y value, using  sharedTooltipRender event?

Thanks!
Aruna

[Nishanthi Panner Selvam]

Aruna,

Query1: Is it possible to dynamically add HTML div within each chart element

We have analyzed your query based on that we suggest you to use the HTML <div> with unique id just above the chart. This div will be dynamically rendered each time the chart is generated, and div with unique id ensures to update corresponding tooltip y-values to HTML div through sharedTooltipRender.

We have attached code-snippet, sample and screenshot for your reference.

Code-snippet:

  < div * ngFor = "let chartItem of tab.Charts" >

             <div [id] = "'text' + chartItem.ChartId" >         

                 < span class="tooltip-line">

                <svg height = "10" width="40" style="margin-right: 10px; margin-top: 10px;">

                  <rect width = "40" height="2" style="fill:#8ae1d9;stroke-width:1;stroke:#8ae1d9"/>

                </svg>

                <p>S-Attempts - {{ sAttempts}} 

               </ p >

              </ span >

     </ div >

    < ejs – chart # chartRef ></ ejs - chart >

 

    sharedTooltipRender(args: any) {

     var Id = args.series[0].chart.element.id;

    var text = document.getElementById(`${'text' + Id}`);

    if (text) {

      // Clear existing content before updating

      text.innerHTML = '';

      for (let i = 0; i < args.text.length; i++) {

        // Append both SVG and text in the same container

        text.innerHTML += `<div class="tooltip-line">

          <svg height="10" width="40" style="margin-right: 10px; margin-top: 10px;">

            <rect width="40" height="2" style="fill:#8ae1d9;stroke-width:1;stroke:#8ae1d9"/>

          </svg>

          <span>${ args.series[i].name } : ${ args.point[i].y }</span>

        </div>`;

      }

    }

Screenshot:

Sample: https://stackblitz.com/edit/github-hcmejw-7w5ocs?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fdatasource.ts,src%2Fapp.component.scss

Query2: Additionally, considering that the chart series list also bound to data source, how can I utilize sharedTooltipRender to achieve the above requirement without defining a fixed set of variables in the TypeScript file?

Before we proceed, could you please share the specific details or parameters you have in mind when referring to 'fixed variables'? Having this information will greatly assist us in conducting a more thorough analysis and enable us to provide you with a more tailored and prompt solution.

Query3: what about updating actual chart legend labels by appending y value, using  sharedTooltipRender event.

It is not feasible to append y-values to actual legend, In that case we have suggested way to create separate HTML div element and dynamically update it with the Y-values using sharedTooltipRender.

Regards,

Nishanthi

[Aruna]

Hi Nishanthi,

My concerns, including Query2, have been resolved with the provided samples. Thank you for the prompt and detailed feedback

Thanks!

Aruana

[Nishanthi Panner Selvam]

Aruna,

We are glad to know that the reported scenario got resolved. Please get back to us if you need further assistance.

Regards,

Nishanthi