Tucan - a plotting library on top of VegaLite

Your Libraries & OS Mentoring Libraries
, , , ,
21

I was also wondering if you guys can also add the rounded edges option in the bar graph? I would love to see that because I know vegalite has that too

22

And for the area graph as well for the fill_color

23

Can you show what I add as a git dependency?

{:tucan, git: "https://github.com/pnezis/tucan"}

you can read more about dependencies here:

https://hexdocs.pm/mix/1.16.0/Mix.Tasks.Deps.html

I was also wondering if you guys can also add the rounded edges option in the bar graph? I would love to see that because I know vegalite has that too

Yes this can be added too, can you please use the github issue tracker for such requests?

24

:tada: v0.4.0 is out. It includes various new features and enhancements:

  • range_bar plots

image
image851×333 18.7 KB

  • First specialized plot added (candlestick)

image
image849×420 21.4 KB

  • Make your plots pannable/zoomable by passing zoomable: true

You can find the full CHANGELOG here

5 Likes
25

Thank you for the great library!

I have the following question. Is there a way to automatically change the Vega-lite theme in response to the page theme toggling introduced in the new Phoenix 1.8 (e.g. light/dark)?

26

Just to inform the community, I solved the theme-change problem in the scope of Phoenix 1.8 by adding two JS.dispatch messages in the Layouts module (one for dark and one for light) and then, by using an addEventListener in the mounted javascript code of VegaLite I selected one of two predefined theme configurations, e.g.:

this.dark_config = {
      axis: {
        domainColor: "#fff",
        gridColor: "#888",
        tickColor: "#fff",
      },
      background: "#333",
      style: {
        "guide-label": { fill: "#fff" },
        "guide-title": { fill: "#fff" },
      },
      title: { color: "#fff", subtitleColor: "#fff" },
      view: { stroke: "#888" },
    };
this.light_config = {
      axis: {
        domainColor: "#000",
        gridColor: "#888",
        tickColor: "#000",
      },
      background: "#fff",
      style: {
        "guide-label": { fill: "#000" },
        "guide-title": { fill: "#000" },
      },
      title: { color: "#000", subtitleColor: "#000" },
      view: { stroke: "#888" },
    };

(In case someone would like to toggle the Vega themes as well.)

2 Likes