Beta: Custom Charts (Beta tester needed) 📊

Hey everyone,

We’re thrilled to tell you that we’re working on Custom Charts!

Instead of HighCharts, we will be using Vega-lite (A High-Level Grammar of Interactive Graphics | Vega-Lite) to render the visualizations.

Since this is quite a dramatic move, we’re looking for some beta testers to help us improve this feature.

If you’re interested, please let us know your tenant’s name via our email: [email protected].

10 Likes

Kudos to the visualization team, this feature is incredible, I just created a new viz type in less than 30 minutes :love_you_gesture:

image

image

5 Likes

Great stuff @anthonytd !

Any word on when Beta testers might be able to get their hands on it? :slight_smile:

1 Like

+1 on the ETA question. Y’all are teasing us with this :joy:

1 Like

Hey @david-ri , @sm_mk , we’ve enabled it for your tenants and sent you an email with instruction, please help check :wink:

1 Like

Hi @tuan.nguyen , I’m just getting started with trying this out, after being on vacation for a couple of weeks.

Would you be OK with me setting up a thread on this forum to capture thoughts / experience / questions etc?

1 Like

That would be amazing! Please feel free to host any thread!

The custom charts already got me out of a situation when we couldn’t order the layers in an area chart. However, is there a timeline for when these will render on PDF exports?

2 Likes

That’s awesome, @Alex_H :clap:t2:
Can you share some tips on how you managed to order the layers in an area chart with custom charts?

About the PDF exports: Yes, I hear you. And we’re actively working on it, actually. It’s expected to arrive in about 2-3 weeks, along with the official release :muscle:t2:

2 Likes

Brilliant - this is how bottom-up layers were implemented in the custom layer chart.

CustomChart {
  fields {
    field field_1 {
      type: "dimension"
      label: "Horizontal Axis"
    }
    field field_2 {
      type: "dimension"
      label: "Legend"
    }
    field field_3 {
      type: "measure"
      label: "Value"
    }
  }
  options {
    // INSERT OPTION DEFINITION HERE
  }
  // INSERT VEGA-LITE JSON SPECIFICATIONS BELOW
  template: @vgl {
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "width": 300, "height": 200,
    "data": {"values": @{values}},
    "mark": {"type":"area","opacity":0.6, "stroke":"black","strokeOpacity":{"expr": "0.6"}, "strokeWidth":2},
    "encoding": {
      "x": {
        "timeUnit": "yearmonth", "field":  @{fields.field_1.name},
        "axis": {"formatType": "time", "title":@{fields.field_1.name}}
      },
      "y": {
        "aggregate": "sum", "field":  @{fields.field_3.name},
      },
      "color": {
        "field": @{fields.field_2.name},
        "scale": {"scheme": "category20b"},
        "sort":"ascending",
        "legend":{"orient": "bottom", "formatType":"time",   "columns":12 }
        
      },
      "order": {"field":@{fields.field_2.name}, "sort": "ascending" }
    }
};;
}
2 Likes