Setting different points types

Setting different points types

Posted by: brzozowski.m24 on 23 June 2021, 5:20 pm EST

• 

  brzozowski.m24

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 23 June 2021, 5:20 pm EST

  Hello, I cannot find the answer and I would like to ask for help.
  
  Is it possible in my case, to set different signs on each method? I’m using

  chartType 

  ‘LineSymbols’ to set each point on the chart. I’m also using itemFormatter property. I would like to set for each method different styles of points which I’m placing in ```
  
  signsArray

  
  https://stackblitz.com/edit/angular-hd5ez8?file=app%2Fapp.component.ts

• 

  brzozowski.m24

  • Post Options:
  • Link
    Copy

  Posted 23 June 2021, 5:23 pm EST - Updated 3 October 2022, 1:31 pm EST

  Also, is it possible to set these signs from signsArray in legend items? Currently all items in legend shows circles, but I would like to place there specific sing for specific method.
  
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 25 June 2021, 3:17 am EST

  Hi,

  Yes, it is possible. You can set the different LineSymbols to each series of the chart(in your case method). You need to compare methods to the series name instead of htinfo.item.method, then the signs will be assigned to each series(method) instead of series points.
  
  To change the legends signs, you may use the rendering event of FlexChart and place the new signs after removing old ones. Please refer to the code snippet:

    renderingChart(chart) {
      let legends = document.querySelectorAll('.wj-legend g');
      legends.forEach((ele, index) => {
        if (ele.children.length > 0) {
          if (ele.children[0].tagName == 'ellipse') {
            let fill = ele.children[0].attributes[2].value;
            ele.children[0].remove();
            ele.children[0].remove();
            ele.children[0].innerHTML = `<tspan fill=${fill}>${
              this.signsArray[index]
            }</tspan> method${index}`;
          }
        }
      });
    }
  
  

  You may refer to the sample demonstrating the same:

  https://stackblitz.com/edit/angular-bsfz5y

  Note: To access the global variables inside the formatter method, you need to bind the formatter function to this and assign it to the new variable which you need to assign on the template side. Please refer to the above sample.

  Regards,
  
  Ashwin