Meistercharts-react will render every chart inside its own container (div). Without any specified size it will completely fill its parent, but will have a minimum height of 150 Pixels.

There are three way to define a custom size for your chart: style the parent, use CSS- classes or the style prop on the chart component.

Style the parent

Since all chart components of meistercharts will adjust their size to fill the parent container, you can just style the parent with the method of your choice.

Example:

<div style={{ width: '1024px', height: '768px' }}>
  <BarChartGrouped configuration={config} />
</div>

CSS- Classes

Meistercharts-react will pass className through to the div- container, in which the chart is rendered. So it is possible to style the Chart component directly with CSS- classes.

Example:

// styles.css
.chart {
  width: 1024px;
  height: 768px;
}

// MyChart.tsx
return (
  <BarChartGrouped configuration={config} className="chart" />
)

Style Prop

As well as the className the style prop of the component will also be passed through to the div- container.

Example:

return (
  <BarChartGrouped
    configuration={config}
    style={{ width: '1024px', height: '768px' }}
  />
)

Small Charts

For all charts we have set a minimum height of 150 Pixels. In some cases it can be desirable to render charts that are smaller than this minimum.

To create smaller charts you have to explixitly set the height and min-height on the chart component to the desired values. This can be done either with CSS- classes or the style prop.

return (
  <BarChartGrouped
    configuration={config}
    style={{ height: '75px', minHeight: '75px' }}
  />
)