Shared Custom Charts in the Community

Tips and Hacks
,
1

I’m pretty inspired by Launched: Custom Charts 📊

I’m in the process of creating a couple custom charts using the holistics GitHub as a starting point. I think it would be interesting to have a “community charts” options where we could browse and import custom charts defined by community members. Sort of like community plugins for Obsidian.

If anyone has a repo, share it.

Here’s my fork, i’ll make pull requests back to the community from here.

Please Share!
.stone

6 Likes
2

Hey @Matt_Stone! Thanks a bunch for sharing your custom charts repo with our Community!

Just wanted to let you know, the Holistics team also has a repo right here: GitHub - holistics/custom-chart-library: Holistics' Custom Chart Library. We’re always thrilled to receive contributions to this repo!

And hey, if anyone else out there has a repo, feel free to share it too!

Cheers!

2 Likes
3

I noticed that many/most of the custom chart templates explicitly set height and or width of the visualization like this:

  template: @vgl
  {
    "$schema": "https://vega.github.io/schema/vega/v5.json",
    "width": 1000,
    "height": 600,
    "autosize": "none",

Is there a way to make the chart auto-size to the shape of the grid element of the dashboard, similar to the way core charts work?

1 Like
4
  • For vega-lite charts, Holistics will automatically try to enable auto-size, you won’t have to define width, height for them
  • For vega charts, you will have to handle auto-size manually using "autosize": "fit" and resize signals handling. For example:
template: @vg {
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "autosize": "fit",
  "signals": [
    {
      "name": "width",
      "init": "containerSize()[0]",
      "on": [{ "events": "window:resize", "update": "containerSize()[0]" }]
    },
    {
      "name": "height",
      "init": "containerSize()[1]",
      "on": [{ "events": "window:resize", "update": "containerSize()[1]" }]
    }
  ],
  "params": [
    {
      "bind": "..."
    }
  ]
5

Thanks, I forked the repo from holistics and started making PRs – you’ve already pulled a couple in. I think I’ll delete my personal repo and just contribute to the main.

2 Likes
6

Creating Custom Gauge Chart using Custom Charts

Hi folks,

I just made a new Custom Chart template to create Custom Gauge Chart. With this, you’ll have slightly more control over the styling of the ring, label, and color.

custom-gauge-chart

Check it out in the Custom Charts Library repo:

If you have any ideas on how to make it even better, feel free to share!

Cheers!

2 Likes
7

I have created a Treemap template too, please check it out here: custom-chart-library/treemap at main · holistics/custom-chart-library · GitHub

3 Likes