amazing-react-charts 0.7.5 → 0.7.6

package/dist/core/AreaChart.d.ts

@@ -1,9 +1,5 @@
 /// <reference types="react" />
 import { IDefaultChartProps } from './types';
-export declare const STYLES: {
-    width: string;
-    height: number;
-};
 export declare const TOOLBOX_DEFAULT_PROPS: {
     showTitle: boolean;
     right: string;

package/dist/core/AreaChart.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TOOLBOX_DEFAULT_PROPS = exports.STYLES = void 0;
+exports.default = exports.TOOLBOX_DEFAULT_PROPS = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -23,7 +23,6 @@ var STYLES = {
   width: '99.9%',
   height: 300
 };
-exports.STYLES = STYLES;
 var TOOLBOX_DEFAULT_PROPS = {
   showTitle: false,
   right: '9.52%',

package/dist/core/DonutChart.d.ts

@@ -6,8 +6,5 @@ interface IDonutProps extends IProps {
     centerPieValueFontSize?: number;
     selectedMode?: boolean;
 }
-export declare const WIDTH_STYLE: {
-    width: string;
-};
 export declare const DonutChart: (props: IDonutProps) => JSX.Element;
 export default DonutChart;

package/dist/core/DonutChart.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.DonutChart = exports.WIDTH_STYLE = void 0;
+exports.default = exports.DonutChart = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -33,10 +33,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var WIDTH_STYLE = {
-  width: '99.9%'
-};
-exports.WIDTH_STYLE = WIDTH_STYLE;
 var titleStyle = {
   position: 'absolute',
   top: 5,
@@ -181,10 +177,13 @@ var DonutChart = function DonutChart(props) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      position: 'relative'
+      position: 'relative',
+      width: '100%'
     }
   }, title && /*#__PURE__*/_react.default.createElement(TitleChart, null), /*#__PURE__*/_react.default.createElement(_echartsForReact.default, {
-    style: _objectSpread({}, WIDTH_STYLE),
+    style: {
+      minWidth: '100%'
+    },
     opts: (0, _auxiliarFunctions.getWidthOpts)(width),
     option: options
   }));

package/dist/core/ForecastAreaChart.js

@@ -19,8 +19,6 @@ var _auxiliarFunctions = require("../lib/auxiliarFunctions");
 
 var _take = _interopRequireDefault(require("ramda/es/take"));
 
-var _AreaChart = require("./AreaChart");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -29,6 +27,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+var STYLES = {
+  width: '99.9%',
+  height: 300
+};
+
 var ForecastAreaChart = function ForecastAreaChart(props) {
   var data = props.data,
       xType = props.xType,
@@ -281,7 +284,7 @@ var ForecastAreaChart = function ForecastAreaChart(props) {
   return /*#__PURE__*/React.createElement(_echartsForReact.default, {
     lazyUpdate: true,
     notMerge: true,
-    style: _AreaChart.STYLES,
+    style: STYLES,
     opts: (0, _auxiliarFunctions.getWidthOpts)(width || 'auto'),
     onEvents: zoomEvent,
     option: options

package/dist/core/HorizontalBarChart.js

@@ -27,10 +27,10 @@ var _auxiliarFunctions = require("../lib/auxiliarFunctions");
 
 var _reverse = _interopRequireDefault(require("ramda/es/reverse"));
 
-var _DonutChart = require("./DonutChart");
-
 var _AreaChart = require("./AreaChart");
 
+var _constants = require("../lib/constants");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -334,7 +334,7 @@ var HorizontalBarChart = function HorizontalBarChart(props) {
     click: onClickBar
   };
   return /*#__PURE__*/_react.default.createElement(_echartsForReact.default, {
-    style: _DonutChart.WIDTH_STYLE,
+    style: _constants.WIDTH_STYLE,
     opts: (0, _auxiliarFunctions.getWidthOpts)(width || 'auto'),
     onEvents: clickEvent,
     option: options

package/dist/core/LineChart.js

@@ -17,7 +17,7 @@ var _echartsForReact = _interopRequireDefault(require("echarts-for-react"));
 
 var _auxiliarFunctions = require("../lib/auxiliarFunctions");
 
-var _DonutChart = require("./DonutChart");
+var _constants = require("../lib/constants");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -204,7 +204,7 @@ var LineChart = function LineChart(props) {
   return /*#__PURE__*/React.createElement(_echartsForReact.default, {
     lazyUpdate: true,
     notMerge: true,
-    style: _DonutChart.WIDTH_STYLE,
+    style: _constants.WIDTH_STYLE,
     opts: (0, _auxiliarFunctions.getWidthOpts)(width || 'auto'),
     option: options
   });

package/dist/core/MultipurposeChart.d.ts

@@ -14,8 +14,5 @@ interface MultipurposeChartProps {
     yComplement?: (input: string) => string;
     rangeSelector?: boolean;
 }
-export declare const WIDTH_STYLE: {
-    width: string;
-};
 declare const _default: React.MemoExoticComponent<(props: MultipurposeChartProps) => JSX.Element>;
 export default _default;

package/dist/core/MultipurposeChart.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WIDTH_STYLE = void 0;
+exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -19,6 +19,8 @@ var _echartsForReact = _interopRequireDefault(require("echarts-for-react"));
 
 var _auxiliarFunctions = require("../lib/auxiliarFunctions");
 
+var _constants = require("../lib/constants");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -27,11 +29,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var WIDTH_STYLE = {
-  width: '99.9%'
-};
-exports.WIDTH_STYLE = WIDTH_STYLE;
-
 var isDarkColor = function isDarkColor(color) {
   var c = color.substring(1);
   var rgb = parseInt(c, 16);
@@ -217,7 +214,7 @@ var MultipurposeChart = function MultipurposeChart(props) {
     }
   };
   return /*#__PURE__*/_react.default.createElement(_echartsForReact.default, {
-    style: WIDTH_STYLE,
+    style: _constants.WIDTH_STYLE,
     opts: (0, _auxiliarFunctions.getWidthOpts)(width || 'auto'),
     option: options,
     ref: ref,

package/dist/core/PieChart.js

@@ -23,10 +23,10 @@ var _sum = _interopRequireDefault(require("ramda/es/sum"));
 
 var _auxiliarFunctions = require("../lib/auxiliarFunctions");
 
-var _DonutChart = require("./DonutChart");
-
 var _AreaChart = require("./AreaChart");
 
+var _constants = require("../lib/constants");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -152,7 +152,7 @@ var PieChart = function PieChart(props) {
     toolbox: toolbox
   };
   return /*#__PURE__*/_react.default.createElement(_echartsForReact.default, {
-    style: _DonutChart.WIDTH_STYLE,
+    style: _constants.WIDTH_STYLE,
     opts: (0, _auxiliarFunctions.getWidthOpts)(width || 'auto'),
     option: options
   });

package/dist/core/RadarChart.js

@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _auxiliarFunctions = require("../lib/auxiliarFunctions");
 
-var _DonutChart = require("./DonutChart");
+var _constants = require("../lib/constants");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -80,7 +80,7 @@ var RadarChart = function RadarChart(props) {
     }, emphasis)]
   };
   return /*#__PURE__*/_react.default.createElement(_echartsForReact.default, {
-    style: _DonutChart.WIDTH_STYLE,
+    style: _constants.WIDTH_STYLE,
     opts: (0, _auxiliarFunctions.getWidthOpts)(width || 'auto'),
     option: options
   });

package/dist/core/StackedBarChart.js

@@ -23,12 +23,12 @@ var _auxiliarFunctions = require("../lib/auxiliarFunctions");
 
 var _VerticalBarChart = require("./VerticalBarChart");
 
-var _DonutChart = require("./DonutChart");
-
 var _concat = _interopRequireDefault(require("ramda/es/concat"));
 
 var _move = _interopRequireDefault(require("ramda/es/move"));
 
+var _constants = require("../lib/constants");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -332,7 +332,7 @@ var StackedBarChart = function StackedBarChart(props) {
   };
   return /*#__PURE__*/React.createElement(_echartsForReact.default, {
     notMerge: true,
-    style: _DonutChart.WIDTH_STYLE,
+    style: _constants.WIDTH_STYLE,
     opts: (0, _auxiliarFunctions.getWidthOpts)(width || 'auto'),
     onEvents: zoomEvent,
     option: options

package/dist/core/VerticalBarChart.js

@@ -19,7 +19,7 @@ var _echartsForReact = _interopRequireDefault(require("echarts-for-react"));
 
 var _auxiliarFunctions = require("../lib/auxiliarFunctions");
 
-var _DonutChart = require("./DonutChart");
+var _constants = require("../lib/constants");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -210,7 +210,7 @@ var VerticalBarChart = function VerticalBarChart(props) {
   var formatLabel = function formatLabel(chartValues) {
     var value = chartValues.value;
     var isTimeType = yType === 'time';
-    return isTimeType ? (0, _auxiliarFunctions.timeConvert)(Number(value)) + yComplement : (0, _auxiliarFunctions.takeLabelComplement)(Number(value), yComplement);
+    return isTimeType ? (0, _auxiliarFunctions.timeConvert)(Number(value)) + 'h' : (0, _auxiliarFunctions.takeLabelComplement)(Number(value), yComplement);
   };
 
   var toolbox = toolboxTooltip && {
@@ -339,7 +339,7 @@ var VerticalBarChart = function VerticalBarChart(props) {
   return /*#__PURE__*/React.createElement(_echartsForReact.default, {
     lazyUpdate: true,
     notMerge: true,
-    style: _DonutChart.WIDTH_STYLE,
+    style: _constants.WIDTH_STYLE,
     opts: (0, _auxiliarFunctions.getWidthOpts)(width || 'auto'),
     onEvents: events,
     option: options

package/dist/lib/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const WIDTH_STYLE: {
+    width: string;
+};

package/dist/lib/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WIDTH_STYLE = void 0;
+var WIDTH_STYLE = {
+  width: '99.9%'
+};
+exports.WIDTH_STYLE = WIDTH_STYLE;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amazing-react-charts",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "description": "An amazing react charts package based in echarts",
   "license": "MIT",
   "main": "dist/index.js",

package/src/core/AreaChart.tsx

@@ -20,7 +20,7 @@ import {
   ZoomProps
 } from './types'
 
-export const STYLES = { width: '99.9%', height: 300 }
+const STYLES = { width: '99.9%', height: 300 }
 export const TOOLBOX_DEFAULT_PROPS = {
   showTitle: false,
   right: '9.52%',

package/src/core/DonutChart.tsx

@@ -21,8 +21,6 @@ interface IDonutProps extends IProps {
   selectedMode?: boolean
 }
 
-export const WIDTH_STYLE = { width: '99.9%' }
-
 const titleStyle: CSSProperties = {
   position: 'absolute',
   top: 5,
@@ -177,10 +175,10 @@ export const DonutChart = (props: IDonutProps) => {
   const TitleChart = () =>  <h1 style={titleStyle}>{titleProps}</h1>
 
   return (
-    <div style={{ position: 'relative'}}>
+    <div style={{ position: 'relative', width: '100%'}}>
       {title && <TitleChart />}
       <ReactEcharts
-        style={{...WIDTH_STYLE}}
+        style={{ minWidth: '100%' }}
         opts={getWidthOpts(width)}
         option={options}
       />

package/src/core/ForecastAreaChart.tsx

@@ -22,7 +22,8 @@ import {
   ZoomProps
 } from './types'
 import { take } from 'ramda'
-import { STYLES } from './AreaChart'
+
+const STYLES = { width: '99.9%', height: 300 }
 
 interface IProps extends Omit<IDefaultChartProps, 'tooltip'> {
   tooltip: {

package/src/core/HorizontalBarChart.tsx

@@ -22,8 +22,8 @@ import {
   formatLabelWithImage,
 } from '../lib/auxiliarFunctions'
 import { reverse } from 'ramda'
-import { WIDTH_STYLE } from './DonutChart'
 import { TOOLBOX_DEFAULT_PROPS } from './AreaChart'
+import { WIDTH_STYLE } from '../lib/constants'
 
 interface IProps extends IDefaultChartProps {
   showTickInfos?: boolean;

package/src/core/LineChart.tsx

@@ -16,7 +16,7 @@ import {
   takeLabelComplement,
   timeConvert
 } from '../lib/auxiliarFunctions'
-import { WIDTH_STYLE } from './DonutChart'
+import { WIDTH_STYLE } from '../lib/constants'
 
 interface IProps extends Omit<IDefaultChartProps, 'data'> {
   data: EntryDataLine[]

package/src/core/MultipurposeChart.tsx

@@ -9,6 +9,7 @@ import {
   timeConvert 
 } from '../lib/auxiliarFunctions'
 import { IDefaultChartProps, WidthProps } from './types'
+import { WIDTH_STYLE } from '../lib/constants'
 
 interface MultipurposeChartProps {
   series: Array<{
@@ -25,9 +26,6 @@ interface MultipurposeChartProps {
   rangeSelector?: boolean
 }
 
-export const WIDTH_STYLE = { width: '99.9%' }
-
-
 const isDarkColor = (color: string) => {
   const c = color.substring(1)
   const rgb = parseInt(c, 16)

package/src/core/PieChart.tsx

@@ -14,8 +14,8 @@ import {
   getPercentage,
   getWidthOpts
 } from '../lib/auxiliarFunctions'
-import { WIDTH_STYLE } from './DonutChart'
 import { TOOLBOX_DEFAULT_PROPS } from './AreaChart'
+import { WIDTH_STYLE } from '../lib/constants'
 
 export interface IProps extends Omit<IDefaultChartProps, 'data'> {
   data: PieChartData[]

package/src/core/RadarChart.tsx

@@ -2,8 +2,8 @@ import ReactEcharts from 'echarts-for-react'
 import { EChartOption } from 'echarts/lib/echarts'
 import React from 'react'
 import { getWidthOpts, takeLabelComplement } from '../lib/auxiliarFunctions'
-import { WIDTH_STYLE } from './DonutChart'
 import { WidthProps } from './types'
+import { WIDTH_STYLE } from '../lib/constants'
 
 interface RadarChartProps {
   series: Array<{

package/src/core/StackedBarChart.tsx

@@ -31,8 +31,8 @@ import {
   normalLabel,
   rotatedLabel
 } from './VerticalBarChart'
-import { WIDTH_STYLE } from './DonutChart'
 import { concat, move } from 'ramda'
+import { WIDTH_STYLE } from '../lib/constants'
 
 interface IProps extends Omit<IDefaultChartProps, 'data'> {
   data: EntryDataNTuples

package/src/core/VerticalBarChart.tsx

@@ -22,7 +22,7 @@ import {
   getWidthOpts,
   getDateFormatType
 } from '../lib/auxiliarFunctions'
-import { WIDTH_STYLE } from './DonutChart'
+import { WIDTH_STYLE } from '../lib/constants'
 
 interface IProps extends IDefaultChartProps {
   rotateTickLabel?: number
@@ -196,7 +196,7 @@ const VerticalBarChart = (props: IProps) => {
     const isTimeType = yType === 'time'
 
     return isTimeType
-      ? timeConvert(Number(value)) + yComplement
+      ? timeConvert(Number(value)) + 'h'
       : takeLabelComplement(Number(value), yComplement)
   }
 

package/src/lib/constants.ts

@@ -0,0 +1 @@
+export const WIDTH_STYLE = { width: '99.9%' }