chart.xkcd icon indicating copy to clipboard operation
chart.xkcd copied to clipboard

Control the SVG size and width/height ratio

Open chenjiandongx opened this issue 4 years ago • 12 comments

Hi @timqian, Is there a easy way to control the SVG size?

I try to set width and height attr like this

<svg class="line-chart" width="800px" height="600px"></svg>

but it seem doesn't work. :)

chenjiandongx avatar Oct 07 '19 14:10 chenjiandongx

The width of the svg depends on its parent. You can change the width of its parent to change its size.

timqian avatar Oct 07 '19 14:10 timqian

The ratio of with and height is hard coded to 4/3. Adding a setting to config it might be good. I am considering adding this

timqian avatar Oct 07 '19 14:10 timqian

Now div is the parent tag,

  <div width="800px" height="600px" width="800px">
      <svg class="line-chart"></svg>
  </div>

but.. SVG shows incomplete

image

chenjiandongx avatar Oct 07 '19 14:10 chenjiandongx

It would be nice if added a new setting opts for it.

chenjiandongx avatar Oct 07 '19 14:10 chenjiandongx

Try

  <div style="width:800px;">
      <svg class="line-chart"></svg>
  </div>

timqian avatar Oct 07 '19 15:10 timqian

It works, :)

The ratio of with and height is hard coded to 4/3.

and is this will be changed in the future?

chenjiandongx avatar Oct 07 '19 15:10 chenjiandongx

The default will always be 4/3, I think adding an option to change it might be good

timqian avatar Oct 07 '19 15:10 timqian

I will keep this issue open for size & ratio related updates

timqian avatar Oct 07 '19 15:10 timqian

@timqian I'm the author of pyecharts. Echarts is a great visualization library created by Baidu frontend team.

I got an idea that combines chart.xkcd with python. Because your charts lib is so adorable and I like such hand drawing style things.

But now it just an idea and not on the shedule temporarily :)

chenjiandongx avatar Oct 08 '19 01:10 chenjiandongx

@timqian cutecharts opensouce today!

https://github.com/chenjiandongx/cutecharts

chenjiandongx avatar Oct 12 '19 09:10 chenjiandongx

@chenjiandongx Nice job! I listed your tool in "who is using chart.xkcd" issue here https://github.com/timqian/chart.xkcd/issues/14

timqian avatar Oct 12 '19 09:10 timqian

@timqian Yes, 👍 already.

chenjiandongx avatar Oct 12 '19 09:10 chenjiandongx