@oliasoft-open-source/charts-library 2.4.1 → 2.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "main": "index.js",
   "files": [

package/release-notes.md

@@ -1,5 +1,9 @@
 # Charts Library Release Notes
 
+## 2.4.2
+
+- Square aspect ratio charts can fill height/width
+
 ## 2.4.1
 
 - Remove dependency on http-server (moved to dev dependencies)

package/src/components/line-chart/line-chart.jsx

@@ -383,14 +383,10 @@ const LineChart = (props) => {
   return (
     <div
       className={getClassName(chartStyling, styles)}
-      style={
-        chartStyling.squareAspectRatio
-          ? {}
-          : {
-              width: chartStyling.width || AUTO,
-              height: chartStyling.height || AUTO,
-            }
-      }
+      style={{
+        width: chartStyling.width || AUTO,
+        height: chartStyling.height || AUTO,
+      }}
       tabIndex={0} //eslint-disable-line jsx-a11y/no-noninteractive-tabindex
       onKeyDown={handleKeyDown}
       onKeyUp={handleKeyUp}
@@ -428,7 +424,8 @@ const LineChart = (props) => {
         options={{
           onClick,
           onHover,
-          maintainAspectRatio: chartStyling.maintainAspectRatio,
+          maintainAspectRatio:
+            chartStyling.squareAspectRatio || chartStyling.maintainAspectRatio,
           aspectRatio: chartStyling.squareAspectRatio ? 1 : null, // 1 equals square aspect ratio
           animation: {
             duration: chartStyling.performanceMode

package/src/components/line-chart/line-chart.module.less

@@ -27,10 +27,10 @@ html[data-theme='dark'] .chart canvas {
     height: 100%;
   }
 
-  // TODO: fix square plot scaling
   &.squareAspectRatio {
-    max-height: 450px;
-    max-width: 450px;
+    aspect-ratio: 1;
+    min-height: 0;
+    min-width: 0;
   }
 
   &:focus {

package/src/components/line-chart/line-chart.stories.jsx

@@ -149,6 +149,26 @@ const TemplateWithCustomLegendContainer = (args) => {
 
 export const Default = Template.bind({});
 
+export const FillContainer = Template.bind({});
+FillContainer.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      chartStyling: {
+        height: '100%',
+      },
+    },
+  },
+};
+FillContainer.decorators = [
+  (Story) => (
+    <div style={{ height: 400, width: 500 }}>
+      <Story />
+    </div>
+  ),
+];
+
 export const DataGaps = Template.bind({});
 DataGaps.args = {
   chart: {
@@ -422,3 +442,26 @@ SquareAspectRatio.args = {
     },
   },
 };
+
+export const SquareAspectRatioFillContainer = Template.bind({});
+SquareAspectRatioFillContainer.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      title: 'Square aspect ratio',
+      chartStyling: {
+        squareAspectRatio: true,
+        maintainAspectRatio: true,
+        height: '100%',
+      },
+    },
+  },
+};
+SquareAspectRatioFillContainer.decorators = [
+  (Story) => (
+    <div style={{ display: 'flex', height: 400, width: 600 }}>
+      <Story />
+    </div>
+  ),
+];