Can't Dynamically Set Size For Chart

[shal-xu]

My goal is to let different charts have different sizes. For example, I might have a size prop in my component, and big would mean the chart is rendered bigger.

According to docs of keen-dataviz, It's better to control the size using the CSS of the container HTML element.
(While it's also possible to directly pass in {size: {width:..., height:xxx }}) to c3, it seems to only work for height, and not width.

Except we don't have access to the <div> directly in keen-react-charts.

I have tried adding two classNames through theme, e.g. theme="keen-dataviz my-own-class", but that seems to break the whole chart.

The solution could come in a variety of ways, but here are some I could see:

1. Allow passing in a style prop to <Chart>, which will then be applied on the <div>
2. Allow passing in a size prop to <Chart>, which will then be applied on the <div>
3. Allow passing in multiple classNames as theme to <Chart>, which will then be applied on the <div>
4. Allow passing in a id prop to <Chart>, which will then be applied on the <div>

[maciejrybaniec]

Hi, @shal-xu

The keen-react-charts is wrapper for old DataViz library and we are in process of dropping support for it as few months ago we introduced a new library.

For direct React integration I recommend to use our new charts library which is written in pure React

• https://www.npmjs.com/package/@keen.io/widgets

For integration with Keen Query language I recommend to use a new DataViz

• https://www.npmjs.com/package/@keen.io/dataviz

Here is example Dashboards created with this version:

• https://static.keen.io/dashboard/marketing/index.html
• https://static.keen.io/dashboard/iot/index.html

By using new DataViz You could easily control size of charts by by modifying the width / height of parent container - that You are using to render visualization.