XY Chart Round Column Corners

Is there a way to round the corners of the columns / bars in an XY chart where the series is displayed as a column.

Hi Matthew_DeLuca,
You may achieve that by using user created properties. To round the corners of the columns in the XY chart, you could manually add the properties cornerRadiusTopLeft and cornerRadiusTopRight under the manually created columns.template.column object in your series property.
image

Hi @Emma_Ngo,

I've just implement your solution to round the bars corners because it seems like is not possible to manipulate them with css.

I wonder what other properties I could change in this way, because I can't find a list of them and if I try to add some other properties they don't work (for example boxShadow).

Thank you for the support.

Hi,
Do you know what field to add to hide the x-axis or to change the x-axis color to white, I have tried many custom fields and none of them work!

Set yAxes>[x] grid opacity to 0

I just checked and I did write 0 here.

My chart
[
  {
    "type": "ia.chart.xy",
    "version": 0,
    "props": {
      "title": {
        "text": ".",
        "appearance": {
          "color": "#FFFFFF",
          "font": {
            "size": 18,
            "weight": 500
          }
        }
      },
      "subtitle": {
        "text": ".",
        "appearance": {
          "color": "#FFFFFF"
        }
      },
      "legend": {
        "enabled": false,
        "position": "absolute",
        "absolute": {
          "x": "40%",
          "y": "-12%"
        },
        "markers": {
          "height": 10,
          "stroke": {
            "width": 0
          }
        },
        "labels": {
          "font": {
            "weight": 50,
            "size": 10,
            "color": "#000000"
          }
        }
      },
      "xAxes": [
        {
          "name": "type",
          "label": {
            "enabled": false,
            "text": "Type",
            "color": "#4E5969"
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "category",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "format": "yyyy/M/d HH:mm"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "color": "#080808",
              "opacity": 1,
              "rotation": 0,
              "verticalCenter": "middle",
              "horizontalCenter": "middle"
            },
            "grid": {
              "color": "",
              "opacity": 0,
              "dashArray": "",
              "minDistance": 100,
              "position": 0.5
            },
            "font": {
              "size": 14,
              "weight": 400
            }
          }
        }
      ],
      "yAxes": [
        {
          "name": "value",
          "label": {
            "enabled": false,
            "text": "num",
            "color": "#4E5969"
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "value",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "format": "M/d/yyyy HH:mm:ss"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "color": "#080808",
              "opacity": 0,
              "rotation": 0,
              "verticalCenter": "middle",
              "horizontalCenter": "middle"
            },
            "grid": {
              "color": "",
              "opacity": 0,
              "dashArray": "",
              "minDistance": null,
              "position": 0.5
            },
            "font": {
              "size": 14,
              "weight": 400
            }
          }
        }
      ],
      "series": [
        {
          "name": "Left",
          "label": {
            "text": "Left"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "data",
            "x": "Type",
            "y": "Num"
          },
          "xAxis": "type",
          "yAxis": "value",
          "zIndex": 0,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{valueY}[/]",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "column",
          "candlestick": {
            "open": {
              "x": "",
              "y": ""
            },
            "high": {
              "x": "",
              "y": ""
            },
            "low": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "column": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "#037D6C",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 0
              },
              "stacked": false,
              "width": 40,
              "height": null,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "line": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 2,
                "opacity": 1,
                "color": "#080808",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 5,
                  "height": 5,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "#080808",
                    "opacity": 0.6
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 0,
                    "width": 0
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}\n时间:{categoryX}[/]\nCpk:{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          },
          "stepLine": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          },
          "columns": {
            "template": {
              "column": {
                "cornerRadiusTopLeft": 8,
                "cornerRadiusTopRight": 8
              }
            }
          }
        }
      ],
      "style": {
        "classes": "Text/Content"
      },
      "dataSources": {
        "data": {
          "$": [
            "ds",
            192,
            1736317518836
          ],
          "$columns": [
            {
              "name": "Type",
              "data": [
                "Core Remaining",
                "Strip Break",
                "Electrode Defect",
                "Startup"
              ],
              "type": "String"
            },
            {
              "name": "Num",
              "data": [
                220,
                95,
                80,
                20
              ],
              "type": "Double"
            }
          ]
        }
      }
    },
    "meta": {
      "name": "XYChart"
    },
    "position": {},
    "custom": {},
    "propConfig": {
      "props.dataSources.data[0].datetime": {
        "binding": {
          "config": {
            "path": "view.params.st"
          },
          "type": "property"
        }
      },
      "props.dataSources.data[1].datetime": {
        "binding": {
          "config": {
            "path": "view.params.et"
          },
          "type": "property"
        }
      }
    }
  }
]

You can achieve this but then your lowest value bar will disappear.

1 Like