Custom Drawing tools

[workingbuddy10]

I have made the custom list on Drawing tools in my app, where I have already implemented a few of the drawing tool functionalities and they are working perfectly fine. But I want to implement/add Parallel Channel & Measure tool. Only these two are not working!

For example I have implemented Fibonacci tool like this and it is working fine:

      function enableDrawingTool(tool) {
        //each time disable drawing tools and eraser
        disableEraser();
        disableDrawingTools();
        switch (tool) {
          case document
            .getElementsByClassName("custom-am5stock-list-item active")[0]
            .getAttribute("title"):
            return disableDrawingTools();
          case "Anchor":
            disableDrawingTools();
            break;
          default:
            document.getElementById("anchor").classList.remove("active");
            selectedChartData.drawingControl._maybeInitToolSeries(tool);
            let seriesList = selectedChartData.drawingControl._drawingSeries[tool];
            seriesList[0].enableDrawing();
            selectedChartData.drawingControl._currentEnabledSeries.push(
              seriesList[0]
            );
        }
        //selects the selected tool
        document
          .getElementById(tool.toLowerCase().replace(" ", ""))
          .classList.add("active");
      }

  return (
            <ul className="custom-am5stock-control-list">
              <li
                className="custom-am5stock-list-item"
                id="fibonacci"
                title="Fibonacci"
                onClick={() => enableDrawingTool("Fibonacci")}
              >
                <svg
                  viewBox="0 0 50 50"
                  className="custom-am5stock_control_default_icon"
                >
                  <path d="M2 3 h46 M2 11.5 h46 M2 24 h46 M2 49 h46"></path>
                </svg>
                <label>Fibonacci</label>
              </li>
              </ul>
              )

Like that only I am trying to add Parallel Channel & Measure tool :

 return (
            <ul className="custom-am5stock-control-list">
              <li
                className="custom-am5stock-list-item"
                id="fibonacci"
                title="Fibonacci"
                onClick={() => enableDrawingTool("Fibonacci")}
              >
                <svg
                  viewBox="0 0 50 50"
                  className="custom-am5stock_control_default_icon"
                >
                  <path d="M2 3 h46 M2 11.5 h46 M2 24 h46 M2 49 h46"></path>
                </svg>
                <label>Fibonacci</label>
              </li>

              {/* measure tool not working */}
              <li
                className="custom-am5stock-list-item"
                id="measure"
                title="Measure"
                onClick={() => enableDrawingTool("Measure")}
              >
                <svg
                  viewBox="0 0 50 50"
                  className="custom-am5stock_control_default_icon"
                >
                  <path d="M 3 38 L 35 6 L 46 17 L 14 49 L 3 38 M 10 31 L 16 37 M 16 25 L 20 29 M 22 19 L 26 23 M 28 13 L 34 19 M 50 50"></path>
                </svg>
                <label>Measure</label>
              </li>

              {/* parallel channel tool not working */}
              <li
                className="custom-am5stock-list-item"
                id="parallelchannel"
                title="Parallel Channel"
                onClick={() => enableDrawingTool("Parallel Channel")}
              >
                <svg
                  viewBox="0 0 50 50"
                  className="custom-am5stock_control_default_icon"
                >
                  <path d="M5 2.5 v46 M13.5 2.5 v46 M26 2.5 v46 M46.5 2.5 v46"></path>
                </svg>
                <label>Parallel Channel</label>
              </li>

              </ul>
              )

Encountering errors :

Cannot read properties of null (reading 'classList')
TypeError: Cannot read properties of null (reading 'classList')

So is it something I doing wrong like giving title or something?

[martynasma]

I'm not entirely sure what the code is suppose to do. Is it adding an icon to some stock toolbar control?

Would you be able to provide a working CodePen of your implementation?

[workingbuddy10]

I want to ask how can we target the settings of the individual drawing tool, like I am implementing whenever user right clicks on the tool then this pop-up displays for setting/config of the drawing tool.

For example user clicks on the callout tool, the tool gets activated but when user Right clicks on the callout tool then this config/setting pop-up should appear.

@martynasma

[workingbuddy10]

I'm not entirely sure what the code is suppose to do. Is it adding an icon to some stock toolbar control?

Would you be able to provide a working CodePen of your implementation?

I placed the icons of each tools and gave them the title, passing it to the enableDrawingTool & whenever user clicks on the icon the drawing tool of amcharts is initiated.

so like that I am able to initiate almost all of the tools except Parallel Channel & Measure tool.

[workingbuddy10]

And how come Parallel Channel & Measure tool is not mentioned in the Available tools, is there any exception?

As these two are causing the issue for me, rest of the tools are working fine.

https://www.amcharts.com/docs/v5/charts/stock/toolbar/drawing-control/#Available_tools

@martynasma

[martynasma]

Thank you for your heads up about documentation missing some information. It's now fixed.

As for other questions, if you want us to take a look, you might consider posting a working chart setup in a CodePen.

Otherwise, we can't help.

Alternatively, if you do have support subscription, feel free to contact us at contact@amcharts.com

Please note, custom addition development is not within the scope of our support service. We might point to some issues if something jumps out at us, and provide general guidance and answers to questions, but we do not provide full on user code reviews and troubleshooting. Hope that sounds reasonable.

[workingbuddy10]

I want to ask how can we target the settings of the individual drawing tool, like I am implementing whenever user right clicks on the tool then this pop-up displays for setting/config of the drawing tool.

For example user clicks on the callout tool, the tool gets activated but when user Right clicks on the callout tool then this config/setting pop-up should appear.

@martynasma

Can you please help me how can I achieve this or how at least how can I target the settings of tools?

[workingbuddy10]

I'm not entirely sure what the code is suppose to do. Is it adding an icon to some stock toolbar control? Would you be able to provide a working CodePen of your implementation?

I placed the icons of each tools and gave them the title, passing it to the enableDrawingTool & whenever user clicks on the icon the drawing tool of amcharts is initiated.

so like that I am able to initiate almost all of the tools except Parallel Channel & Measure tool.

@martynasma Now I got the reason these Two tools were not working. I was using version of amcharts5 5.4.0, but when I upgraded to 5.6.1 this issue got fixed.

[github-actions[bot]]

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.