How to customize a chart widget using Y42 as code
Steps to get Custom Charts working
- Navigate to your space selection menu by going to organisation selection menu (top left corner)
- There is a link to your git repository there, click it to go to your Repository (e.g. in GitHub)
- Alternatively, you can open your repository from within your own IDE
- From there, locate an existing widget in:
src/Visualizations/Widgets - Open the
settings.jsonfile of the the widget that you would like to configure - Add an
extra_echarts_configproperty at the root (i.e. the bottom) of the object - Reference the Chart Configuration documentation from ECharts to add additional properties to the chart. Echarts provides many helpful and interactive examples to show how the code can be written.
For example, if you want your legend to be displayed further right, the code that you add might look like this:
,
"extra_echarts_config": {
"legend": {
"show": true
}
}
Y42 will perform a merge of this configuration on top of the one generated from the widget settings, overriding only properties that you provide.
For cases like series where the value is an array, you can safely provide empty objects for elements you don't intend to alter.
- Commit and push the changes directly or make a pull request as you prefer.
- Once the changes are committed, fetch the changes in Y42 (the fetch action is available in the Git actions bar)
- Your changes will be reflected in the chart.
Iterating on the changes is as easy as adding new changes to the extra_echarts_config property, committing them, and fetching the changes in Y42.
Examples
In context, inserting the snippet as described above would fit at the root of the object in a similar way to the example below:
{
"$schema": "https://s.dev.y42.dev/frontend/0.0.0/visualization/visualization-widget-settings.json",
"chart_type": "bar_line_chart",
"settings": {
"series": [
{
"field_id": "X",
"mark": "bar",
"stack_name": 1,
"label": {
"show": true,
"field_ids": [],
"rotate": 0,
"align": "center",
"verticalAlign": "top"
},
"tooltip": {
"show": true,
"field_ids": []
},
"show_right_axis": false,
"format": "inherit",
"cumulative": false,
"hidden": false
}
],
"datasource_table_path": "src/Integrations/ClickUp/tasks",
"chart_type": "bar_line_chart",
"filters": [],
"fields": [
{
"field": "date_created",
"aggregation": "MONTH_YEAR",
"type": "TIMESTAMP",
"alias": "MONTH_YEAR_date_created_X",
"id": "X",
"lowCodeString": null,
"functionTree": null,
"show_in_percentage": false,
"filters": []
},
{
"field": "priority",
"aggregation": "VALUE",
"type": "STRING",
"alias": "VALUE_priority_X",
"id": "X",
"lowCodeString": null,
"functionTree": null,
"show_in_percentage": false,
"filters": []
},
{
"field": "id",
"aggregation": "COUNT",
"type": "STRING",
"alias": "COUNT_id_X",
"id": "X",
"lowCodeString": null,
"functionTree": null,
"show_in_percentage": false,
"filters": []
}
],
"settings": {
"series": [
{
"field_id": "X",
"mark": "bar",
"stack_name": 1,
"label": {
"show": false,
"field_ids": [],
"rotate": 0,
"align": "center",
"verticalAlign": "top"
},
"tooltip": {
"show": true,
"field_ids": []
},
"show_right_axis": false,
"format": "inherit",
"cumulative": false,
"hidden": false
}
],
"show_legend": false,
"axisPointer": {
"show": false,
"type": "line",
"lineStyle": {
"type": "solid",
"opacity": 1
}
},
"dimensions": [
"X"
],
"breakdowns": [
"X"
],
"series_on_y": true,
"serieAxis": {
"min": null,
"max": null,
"show": true,
"type": "value",
"axisName": {
"nameRotate": 0,
"nameGap": 10,
"nameLocation": "middle",
"nameTextStyle": {
"backgroundColor": "transparent",
"borderColor": "#f4f4fb",
"borderWidth": 0,
"fontSize": 12,
"align": "center",
"fontStyle": "normal",
"fontWeight": "normal",
"verticalAlign": "middle",
"fontFamily": "Arial",
"borderRadius": 0,
"padding": [
2,
2,
2,
2
],
"color": "#a7a7a7",
"colorTo": "#a7a7a7"
}
},
"axisLine": {
"showLabel": true,
"symbol": "none",
"lineStyle": {
"type": "solid",
"opacity": 1
}
},
"axisLabel": {
"backgroundColor": "transparent",
"borderColor": "#f4f4fb",
"borderWidth": 0,
"fontSize": 12,
"align": "right",
"fontStyle": "normal",
"fontWeight": "normal",
"verticalAlign": "middle",
"fontFamily": "Arial",
"borderRadius": 0,
"padding": [
2,
2,
2,
2
],
"show": true,
"rotate": 0,
"margin": 22,
"suffix": "",
"max_characters": null,
"value_conversion": "Automatic",
"date_format": "",
"value_format": "inherit"
},
"splitLine": {
"showLabel": false,
"lineStyle": {
"type": "solid",
"opacity": 1
}
},
"dataZoom": {
"show": false,
"start": 0,
"end": 100
}
},
"dimensionAxis": {
"min": null,
"max": null,
"show": true,
"type": "time",
"axisName": {
"nameRotate": 0,
"nameGap": 10,
"nameLocation": "middle",
"nameTextStyle": {
"backgroundColor": "transparent",
"borderColor": "#f4f4fb",
"borderWidth": 0,
"fontSize": 12,
"align": "center",
"fontStyle": "normal",
"fontWeight": "normal",
"verticalAlign": "middle",
"fontFamily": "Arial",
"borderRadius": 0,
"padding": [
2,
2,
2,
2
],
"color": "#a7a7a7",
"colorTo": "#a7a7a7"
}
},
"axisLine": {
"showLabel": true,
"symbol": "none",
"lineStyle": {
"type": "solid",
"opacity": 1
}
},
"axisLabel": {
"backgroundColor": "transparent",
"borderColor": "#f4f4fb",
"borderWidth": 0,
"fontSize": 12,
"align": "center",
"fontStyle": "normal",
"fontWeight": "normal",
"verticalAlign": "middle",
"fontFamily": "Arial",
"borderRadius": 0,
"padding": [
2,
2,
2,
2
],
"show": true,
"rotate": 0,
"margin": 22,
"suffix": "",
"max_characters": null,
"value_conversion": "Automatic",
"date_format": "",
"value_format": "inherit"
},
"splitLine": {
"showLabel": false,
"lineStyle": {
"type": "solid",
"opacity": 1
}
},
"dataZoom": {
"show": false,
"start": 0,
"end": 100
}
},
"show_stack_by": true,
"show_stack_by_100_percent": false,
"color_by": {
"hiddenValues": {},
"area": "breakdowns"
}
}
},
"datasource_table_path": "src/Integrations/ClickUp/tasks",
"filters": [],
"fields": [
{
"field": "date_created",
"aggregation": "MONTH_YEAR",
"type": "TIMESTAMP",
"alias": "MONTH_YEAR_date_created_6eb5c68b_7f2a_43da_87c9_f45ecd2c5ff6",
"id": "6eb5c68b_7f2a_43da_87c9_f45ecd2c5ff6",
"lowCodeString": null,
"functionTree": null,
"show_in_percentage": false,
"filters": []
},
{
"field": "priority",
"aggregation": "VALUE",
"type": "STRING",
"alias": "VALUE_priority_8b06f5cf_85f9_417a_bebc_bf2ee706e3d2",
"id": "8b06f5cf_85f9_417a_bebc_bf2ee706e3d2",
"lowCodeString": null,
"functionTree": null,
"show_in_percentage": false,
"filters": []
},
{
"field": "id",
"aggregation": "COUNT",
"type": "STRING",
"alias": "COUNT_id_66c7e336_607f_44dd_8c44_a9217abba7cb",
"id": "66c7e336_607f_44dd_8c44_a9217abba7cb",
"lowCodeString": null,
"functionTree": null,
"show_in_percentage": false,
"filters": []
}
],
"extra_echarts_config": {
"legend": {
"show": true
}
}
}
Updated about 2 years ago