chartist-js / chartist

Simple responsive charts
https://chartist.dev
MIT License
13.34k stars 2.53k forks source link

Function to create svg #1292

Closed syaifurrizal closed 3 years ago

syaifurrizal commented 3 years ago

Last couples day, I tries to make my own legend chart legend and found a problem.

When I create svg tag element with avalable function from Chartist, Chartist sometime failed to render this svg tag after resizing the browser.

After read the code, I guess when Chartist getAttributeAll(svg), and found svg tag with same namespace with Chartist namespace, it will delete first.

After that it's delete the Chartist it self. But here the problem. Because the svg created by plugin already deleted, it's failed to delete it again an the error message come.

1.
<svg>
  <svg> <== this svg deleted first.

  </svg>
</svg>

2.
<svg>
     <==  ? already deleted, but Chartist try to delete it again because still in his list (?)

</svg>

Creating another svg tag inside another svg make easier to set the x & y position.

Plugin can use it's own relative coordinate. It's just like div tag inside another div tag and use relative position.

Also for plugin, it's easier to follow the current color of series by giving it same class.

I manage to create svg by using regular way with createElementNS but after couples day without knowing what's the problem.

Also about class.

Maybe it could be better to more specific when use name class. Where this class didn't contain any stroke size, dimension, and else. Only fill color and stroke color.

Also maybe could be more better again this specific class for color also include background-color and color property for regular html tag.

First time when I think it's not possible to create svg inside another svg, I used div and frustrated that it can't automatically match the colors of chart series.

By the way, am not a developer. But only trying to find a js chart for my blog.

Here the plugin I talked about legendTitle.