Hey,
i’ve some trouble sizing a chart within a widget.
This is a test chart:
uid: chartTestWidget
tags:
- card
props:
parameters: []
timestamp: Jul 9, 2023, 3:18:39 PM
component: f7-card
config:
title: Chart Test
slots:
default:
- component: f7-card-content
slots:
default:
- component: oh-chart
slots:
series:
- component: oh-data-series
config:
type: pie
radius:
- 60%
- 75%
startAngle: 45
itemStyle:
borderRadius: 10
borderColor: "#fff"
borderWidth: 2
label:
width: 140
data:
- value: 10
name: Some value name
itemStyle:
color: rgb(245, 151, 69)
- value: 30
name: Another value
itemStyle:
color: rgb(122, 198, 2459)
- value: 30
name: Last value
itemStyle:
color: rgb(64, 194, 70)
which shows in Designer like this:
when including this within a page:
config:
label: TestPage
blocks: []
masonry:
- component: oh-masonry
slots:
default:
- component: widget:chartTestWidget
config: {}
grid: []
canvas: []
All the Labels are cut off, even if the label width is configured:
So due i’ve not configured any component sizing options, i would expect that the chart is resizied according to the card container, so that all labels are shown completely. Actually only the chart is resized, but the labels are cut of - so the chart is very useless
I’ve tried around a lot of options of card, container and eChart but nothing helped.
Does someone has a hint for me?
Thanks a lot.
Sönke