@carbon/charts 0.44.1 → 0.46.4

package/demo/data/meter.js

@@ -44,4 +44,39 @@ export var meterOptionsNoStatus = {
     },
     height: '100px',
 };
+export var propMeterData = [
+    { group: 'emails', value: 202 },
+    { group: 'photos', value: 654 },
+    { group: 'text messages', value: 723 },
+    { group: 'other', value: 120 },
+];
+export var propMeterOptions = {
+    title: 'Proportional Meter Chart',
+    height: '130px',
+    meter: {
+        proportional: {
+            total: 2000,
+            unit: 'GB',
+        },
+    },
+    color: {
+        pairing: {
+            option: 2,
+        },
+    },
+};
+export var propMeterTruncationOptions = {
+    title: 'Proportional Meter Chart (truncated)',
+    height: '130px',
+    meter: {
+        proportional: {
+            total: 2000,
+            unit: 'MB',
+            totalFormatter: function (total) { return "custom total string for: " + total; },
+            breakdownFormatter: function (x) {
+                return "You are using " + x.datasetsTotal + " GB of the space this label is really long will need to be truncated with a tooltip Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
+            },
+        },
+    },
+};
 //# sourceMappingURL=../../../demo/data/meter.js.map

package/demo/data/meter.js.map

@@ -1 +1 @@
-{"version":3,"file":"meter.js","sourceRoot":"","sources":["meter.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,SAAS,GAAG;IACxB;QACC,KAAK,EAAE,WAAW;QAClB,KAAK,EAAE,EAAE;KACT;CACD,CAAC;AAEF,MAAM,CAAC,IAAM,sBAAsB,GAAG;IACrC,KAAK,EAAE,6BAA6B;IACpC,KAAK,EAAE;QACN,IAAI,EAAE,EAAE;QACR,MAAM,EAAE;YACP,MAAM,EAAE;gBACP,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE;gBACrC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE;gBACtC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE;aACtC;SACD;KACD;IACD,MAAM,EAAE,OAAO;CACf,CAAC;AAEF,MAAM,CAAC,IAAM,uBAAuB,GAAG;IACtC,KAAK,EAAE,yCAAyC;IAChD,KAAK,EAAE;QACN,IAAI,EAAE,EAAE;QACR,MAAM,EAAE;YACP,MAAM,EAAE;gBACP,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE;gBACrC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE;gBACtC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE;aACtC;SACD;KACD;IACD,KAAK,EAAE;QACN,KAAK,EAAE;YACN,WAAW,EAAE,SAAS;SACtB;KACD;IACD,MAAM,EAAE,OAAO;CACf,CAAC;AAEF,MAAM,CAAC,IAAM,oBAAoB,GAAG;IACnC,KAAK,EAAE,yBAAyB;IAChC,KAAK,EAAE;QACN,IAAI,EAAE,EAAE;KACR;IACD,MAAM,EAAE,OAAO;CACf,CAAC","sourcesContent":["export const meterData = [\n\t{\n\t\tgroup: 'Dataset 1',\n\t\tvalue: 56,\n\t},\n];\n\nexport const meterOptionsWithStatus = {\n\ttitle: 'Meter Chart - with statuses',\n\tmeter: {\n\t\tpeak: 80,\n\t\tstatus: {\n\t\t\tranges: [\n\t\t\t\t{ range: [0, 50], status: 'success' },\n\t\t\t\t{ range: [50, 60], status: 'warning' },\n\t\t\t\t{ range: [60, 100], status: 'danger' },\n\t\t\t],\n\t\t},\n\t},\n\theight: '100px',\n};\n\nexport const meterOptionsCustomColor = {\n\ttitle: 'Meter Chart - statuses and custom color',\n\tmeter: {\n\t\tpeak: 70,\n\t\tstatus: {\n\t\t\tranges: [\n\t\t\t\t{ range: [0, 40], status: 'success' },\n\t\t\t\t{ range: [40, 60], status: 'warning' },\n\t\t\t\t{ range: [60, 100], status: 'danger' },\n\t\t\t],\n\t\t},\n\t},\n\tcolor: {\n\t\tscale: {\n\t\t\t'Dataset 1': '#925699',\n\t\t},\n\t},\n\theight: '100px',\n};\n\nexport const meterOptionsNoStatus = {\n\ttitle: 'Meter Chart - no status',\n\tmeter: {\n\t\tpeak: 70,\n\t},\n\theight: '100px',\n};\n"]}
+{"version":3,"file":"meter.js","sourceRoot":"","sources":["meter.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,SAAS,GAAG;IACxB;QACC,KAAK,EAAE,WAAW;QAClB,KAAK,EAAE,EAAE;KACT;CACD,CAAC;AAEF,MAAM,CAAC,IAAM,sBAAsB,GAAG;IACrC,KAAK,EAAE,6BAA6B;IACpC,KAAK,EAAE;QACN,IAAI,EAAE,EAAE;QACR,MAAM,EAAE;YACP,MAAM,EAAE;gBACP,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE;gBACrC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE;gBACtC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE;aACtC;SACD;KACD;IACD,MAAM,EAAE,OAAO;CACf,CAAC;AAEF,MAAM,CAAC,IAAM,uBAAuB,GAAG;IACtC,KAAK,EAAE,yCAAyC;IAChD,KAAK,EAAE;QACN,IAAI,EAAE,EAAE;QACR,MAAM,EAAE;YACP,MAAM,EAAE;gBACP,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE;gBACrC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE;gBACtC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE;aACtC;SACD;KACD;IACD,KAAK,EAAE;QACN,KAAK,EAAE;YACN,WAAW,EAAE,SAAS;SACtB;KACD;IACD,MAAM,EAAE,OAAO;CACf,CAAC;AAEF,MAAM,CAAC,IAAM,oBAAoB,GAAG;IACnC,KAAK,EAAE,yBAAyB;IAChC,KAAK,EAAE;QACN,IAAI,EAAE,EAAE;KACR;IACD,MAAM,EAAE,OAAO;CACf,CAAC;AAEF,MAAM,CAAC,IAAM,aAAa,GAAG;IAC5B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE;IAC/B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE;IAC/B,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,EAAE;IACtC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE;CAC9B,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAG;IAC/B,KAAK,EAAE,0BAA0B;IACjC,MAAM,EAAE,OAAO;IACf,KAAK,EAAE;QACN,YAAY,EAAE;YACb,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,IAAI;SACV;KACD;IACD,KAAK,EAAE;QACN,OAAO,EAAE;YACR,MAAM,EAAE,CAAC;SACT;KACD;CACD,CAAC;AAEF,MAAM,CAAC,IAAM,0BAA0B,GAAG;IACzC,KAAK,EAAE,sCAAsC;IAC7C,MAAM,EAAE,OAAO;IACf,KAAK,EAAE;QACN,YAAY,EAAE;YACb,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,IAAI;YACV,cAAc,EAAE,UAAC,KAAK,IAAK,OAAA,8BAA4B,KAAO,EAAnC,CAAmC;YAC9D,kBAAkB,EAAE,UAAC,CAAC;gBACrB,OAAA,mBAAiB,CAAC,CAAC,aAAa,oNAAiN;YAAjP,CAAiP;SAClP;KACD;CACD,CAAC","sourcesContent":["export const meterData = [\n\t{\n\t\tgroup: 'Dataset 1',\n\t\tvalue: 56,\n\t},\n];\n\nexport const meterOptionsWithStatus = {\n\ttitle: 'Meter Chart - with statuses',\n\tmeter: {\n\t\tpeak: 80,\n\t\tstatus: {\n\t\t\tranges: [\n\t\t\t\t{ range: [0, 50], status: 'success' },\n\t\t\t\t{ range: [50, 60], status: 'warning' },\n\t\t\t\t{ range: [60, 100], status: 'danger' },\n\t\t\t],\n\t\t},\n\t},\n\theight: '100px',\n};\n\nexport const meterOptionsCustomColor = {\n\ttitle: 'Meter Chart - statuses and custom color',\n\tmeter: {\n\t\tpeak: 70,\n\t\tstatus: {\n\t\t\tranges: [\n\t\t\t\t{ range: [0, 40], status: 'success' },\n\t\t\t\t{ range: [40, 60], status: 'warning' },\n\t\t\t\t{ range: [60, 100], status: 'danger' },\n\t\t\t],\n\t\t},\n\t},\n\tcolor: {\n\t\tscale: {\n\t\t\t'Dataset 1': '#925699',\n\t\t},\n\t},\n\theight: '100px',\n};\n\nexport const meterOptionsNoStatus = {\n\ttitle: 'Meter Chart - no status',\n\tmeter: {\n\t\tpeak: 70,\n\t},\n\theight: '100px',\n};\n\nexport const propMeterData = [\n\t{ group: 'emails', value: 202 },\n\t{ group: 'photos', value: 654 },\n\t{ group: 'text messages', value: 723 },\n\t{ group: 'other', value: 120 },\n];\n\nexport const propMeterOptions = {\n\ttitle: 'Proportional Meter Chart',\n\theight: '130px',\n\tmeter: {\n\t\tproportional: {\n\t\t\ttotal: 2000,\n\t\t\tunit: 'GB',\n\t\t},\n\t},\n\tcolor: {\n\t\tpairing: {\n\t\t\toption: 2,\n\t\t},\n\t},\n};\n\nexport const propMeterTruncationOptions = {\n\ttitle: 'Proportional Meter Chart (truncated)',\n\theight: '130px',\n\tmeter: {\n\t\tproportional: {\n\t\t\ttotal: 2000,\n\t\t\tunit: 'MB',\n\t\t\ttotalFormatter: (total) => `custom total string for: ${total}`,\n\t\t\tbreakdownFormatter: (x) =>\n\t\t\t\t`You are using ${x.datasetsTotal} GB of the space this label is really long will need to be truncated with a tooltip Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`,\n\t\t},\n\t},\n};\n"]}

package/demo/data/pie.d.ts

@@ -20,6 +20,17 @@ export declare const pieCenteredOptions: {
         alignment: string;
     };
 };
+export declare const pieDataMapsTo: {
+    group: string;
+    count: number;
+}[];
+export declare const pieMapToOptions: {
+    title: string;
+    resizable: boolean;
+    pie: {
+        valueMapsTo: string;
+    };
+};
 export declare const pieEmptyStateData: any[];
 export declare const pieEmptyStateOptions: {
     title: string;

package/demo/data/pie.js

@@ -21,6 +21,22 @@ export var pieCenteredOptions = {
         alignment: 'center',
     },
 };
+// pie - using a different value key
+export var pieDataMapsTo = [
+    { group: '2V2N 9KYPM version 1', count: 28000 },
+    { group: 'L22I P66EP L22I P66EP L22I P66EP', count: 65000 },
+    { group: 'JQAI 2M4L1', count: 75000 },
+    { group: 'J9DZ F37AP', count: 3200 },
+    { group: 'YEL48 Q6XK YEL48', count: 15000 },
+    { group: 'Misc', count: 25000 },
+];
+export var pieMapToOptions = {
+    title: 'Pie (value maps to count)',
+    resizable: true,
+    pie: {
+        valueMapsTo: 'count',
+    },
+};
 // pie - empty state
 export var pieEmptyStateData = [];
 export var pieEmptyStateOptions = {

package/demo/data/pie.js.map

@@ -1 +1 @@
-{"version":3,"file":"pie.js","sourceRoot":"","sources":["pie.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,OAAO,GAAG;IACtB,EAAE,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,KAAK,EAAE;IAC/C,EAAE,KAAK,EAAE,kCAAkC,EAAE,KAAK,EAAE,KAAK,EAAE;IAC3D,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE;IACrC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,IAAI,EAAE;IACpC,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,KAAK,EAAE;IAC3C,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE;CAC/B,CAAC;AAEF,MAAM,CAAC,IAAM,UAAU,GAAG;IACzB,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,OAAO,CAAC;AAEvC,MAAM,CAAC,IAAM,kBAAkB,GAAG;IACjC,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,IAAI;IACf,MAAM,EAAE;QACP,SAAS,EAAE,QAAQ;KACnB;IACD,GAAG,EAAE;QACJ,SAAS,EAAE,QAAQ;KACnB;CACD,CAAC;AAEF,oBAAoB;AACpB,MAAM,CAAC,IAAM,iBAAiB,GAAG,EAAE,CAAC;AACpC,MAAM,CAAC,IAAM,oBAAoB,GAAG;IACnC,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,IAAI;CACf,CAAC;AAEF,iBAAiB;AACjB,MAAM,CAAC,IAAM,eAAe,GAAG,EAAE,CAAC;AAClC,MAAM,CAAC,IAAM,kBAAkB,GAAG;IACjC,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACL,OAAO,EAAE,IAAI;KACb;CACD,CAAC","sourcesContent":["export const pieData = [\n\t{ group: '2V2N 9KYPM version 1', value: 20000 },\n\t{ group: 'L22I P66EP L22I P66EP L22I P66EP', value: 65000 },\n\t{ group: 'JQAI 2M4L1', value: 75000 },\n\t{ group: 'J9DZ F37AP', value: 1200 },\n\t{ group: 'YEL48 Q6XK YEL48', value: 10000 },\n\t{ group: 'Misc', value: 25000 },\n];\n\nexport const pieOptions = {\n\ttitle: 'Pie',\n\tresizable: true,\n};\n\nexport const pieCenteredData = pieData;\n\nexport const pieCenteredOptions = {\n\ttitle: 'Pie (centered)',\n\tresizable: true,\n\tlegend: {\n\t\talignment: 'center',\n\t},\n\tpie: {\n\t\talignment: 'center',\n\t},\n};\n\n// pie - empty state\nexport const pieEmptyStateData = [];\nexport const pieEmptyStateOptions = {\n\ttitle: 'Pie (empty state)',\n\tresizable: true,\n};\n\n// pie - skeleton\nexport const pieSkeletonData = [];\nexport const pieSkeletonOptions = {\n\ttitle: 'Pie (skeleton)',\n\tresizable: true,\n\tdata: {\n\t\tloading: true,\n\t},\n};\n"]}
+{"version":3,"file":"pie.js","sourceRoot":"","sources":["pie.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,OAAO,GAAG;IACtB,EAAE,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,KAAK,EAAE;IAC/C,EAAE,KAAK,EAAE,kCAAkC,EAAE,KAAK,EAAE,KAAK,EAAE;IAC3D,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE;IACrC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,IAAI,EAAE;IACpC,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,KAAK,EAAE;IAC3C,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE;CAC/B,CAAC;AAEF,MAAM,CAAC,IAAM,UAAU,GAAG;IACzB,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,OAAO,CAAC;AAEvC,MAAM,CAAC,IAAM,kBAAkB,GAAG;IACjC,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,IAAI;IACf,MAAM,EAAE;QACP,SAAS,EAAE,QAAQ;KACnB;IACD,GAAG,EAAE;QACJ,SAAS,EAAE,QAAQ;KACnB;CACD,CAAC;AAEF,oCAAoC;AACpC,MAAM,CAAC,IAAM,aAAa,GAAG;IAC5B,EAAE,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,KAAK,EAAE;IAC/C,EAAE,KAAK,EAAE,kCAAkC,EAAE,KAAK,EAAE,KAAK,EAAE;IAC3D,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE;IACrC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,IAAI,EAAE;IACpC,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,KAAK,EAAE;IAC3C,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE;CAC/B,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG;IAC9B,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,IAAI;IACf,GAAG,EAAE;QACJ,WAAW,EAAE,OAAO;KACpB;CACD,CAAC;AAEF,oBAAoB;AACpB,MAAM,CAAC,IAAM,iBAAiB,GAAG,EAAE,CAAC;AACpC,MAAM,CAAC,IAAM,oBAAoB,GAAG;IACnC,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,IAAI;CACf,CAAC;AAEF,iBAAiB;AACjB,MAAM,CAAC,IAAM,eAAe,GAAG,EAAE,CAAC;AAClC,MAAM,CAAC,IAAM,kBAAkB,GAAG;IACjC,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACL,OAAO,EAAE,IAAI;KACb;CACD,CAAC","sourcesContent":["export const pieData = [\n\t{ group: '2V2N 9KYPM version 1', value: 20000 },\n\t{ group: 'L22I P66EP L22I P66EP L22I P66EP', value: 65000 },\n\t{ group: 'JQAI 2M4L1', value: 75000 },\n\t{ group: 'J9DZ F37AP', value: 1200 },\n\t{ group: 'YEL48 Q6XK YEL48', value: 10000 },\n\t{ group: 'Misc', value: 25000 },\n];\n\nexport const pieOptions = {\n\ttitle: 'Pie',\n\tresizable: true,\n};\n\nexport const pieCenteredData = pieData;\n\nexport const pieCenteredOptions = {\n\ttitle: 'Pie (centered)',\n\tresizable: true,\n\tlegend: {\n\t\talignment: 'center',\n\t},\n\tpie: {\n\t\talignment: 'center',\n\t},\n};\n\n// pie - using a different value key\nexport const pieDataMapsTo = [\n\t{ group: '2V2N 9KYPM version 1', count: 28000 },\n\t{ group: 'L22I P66EP L22I P66EP L22I P66EP', count: 65000 },\n\t{ group: 'JQAI 2M4L1', count: 75000 },\n\t{ group: 'J9DZ F37AP', count: 3200 },\n\t{ group: 'YEL48 Q6XK YEL48', count: 15000 },\n\t{ group: 'Misc', count: 25000 },\n];\n\nexport const pieMapToOptions = {\n\ttitle: 'Pie (value maps to count)',\n\tresizable: true,\n\tpie: {\n\t\tvalueMapsTo: 'count',\n\t},\n};\n\n// pie - empty state\nexport const pieEmptyStateData = [];\nexport const pieEmptyStateOptions = {\n\ttitle: 'Pie (empty state)',\n\tresizable: true,\n};\n\n// pie - skeleton\nexport const pieSkeletonData = [];\nexport const pieSkeletonOptions = {\n\ttitle: 'Pie (skeleton)',\n\tresizable: true,\n\tdata: {\n\t\tloading: true,\n\t},\n};\n"]}

package/demo/styles.css

@@ -10990,6 +10990,8 @@ div.container.theme--white div.bx--cc--legend {
   user-select: none;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
+}
+div.container.theme--white div.bx--cc--legend[data-name=legend-items] {
   margin: -5px;
 }
 div.container.theme--white div.bx--cc--legend div.legend-item {
@@ -11427,7 +11429,12 @@ div.container.theme--white .layout-child.title {
   height: unset !important;
   overflow: hidden;
 }
+div.container.theme--white .bx--cc--meter-title {
+  overflow: visible;
+}
 div.container.theme--white .bx--cc--meter-title text.meter-title,
+div.container.theme--white .bx--cc--meter-title text.proportional-meter-title,
+div.container.theme--white .bx--cc--meter-title text.proportional-meter-total,
 div.container.theme--white .bx--cc--meter-title text.percent-value {
   fill: #161616;
 }
@@ -12673,6 +12680,10 @@ div.container.theme--white .bx--cc--scatter g.lines path.line {
 div.container.theme--white .bx--cc--meter rect.container {
   fill: #f4f4f4;
 }
+div.container.theme--white .bx--cc--meter line.rangeIndicator {
+  stroke: #a8a8a8;
+  stroke-width: 1px;
+}
 div.container.theme--white .bx--cc--meter rect.value.status--danger {
   fill: #da1e28;
 }
@@ -14983,6 +14994,8 @@ div.container.theme--g10 div.bx--cc--legend {
   user-select: none;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
+}
+div.container.theme--g10 div.bx--cc--legend[data-name=legend-items] {
   margin: -5px;
 }
 div.container.theme--g10 div.bx--cc--legend div.legend-item {
@@ -15420,7 +15433,12 @@ div.container.theme--g10 .layout-child.title {
   height: unset !important;
   overflow: hidden;
 }
+div.container.theme--g10 .bx--cc--meter-title {
+  overflow: visible;
+}
 div.container.theme--g10 .bx--cc--meter-title text.meter-title,
+div.container.theme--g10 .bx--cc--meter-title text.proportional-meter-title,
+div.container.theme--g10 .bx--cc--meter-title text.proportional-meter-total,
 div.container.theme--g10 .bx--cc--meter-title text.percent-value {
   fill: #161616;
 }
@@ -16094,6 +16112,10 @@ div.container.theme--g10 .bx--cc--scatter g.lines path.line {
 div.container.theme--g10 .bx--cc--meter rect.container {
   fill: #ffffff;
 }
+div.container.theme--g10 .bx--cc--meter line.rangeIndicator {
+  stroke: #a8a8a8;
+  stroke-width: 1px;
+}
 div.container.theme--g10 .bx--cc--meter rect.value.status--danger {
   fill: #da1e28;
 }
@@ -19375,6 +19397,8 @@ div.container.theme--g90 div.bx--cc--legend {
   user-select: none;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
+}
+div.container.theme--g90 div.bx--cc--legend[data-name=legend-items] {
   margin: -5px;
 }
 div.container.theme--g90 div.bx--cc--legend div.legend-item {
@@ -19813,7 +19837,12 @@ div.container.theme--g90 .layout-child.title {
   height: unset !important;
   overflow: hidden;
 }
+div.container.theme--g90 .bx--cc--meter-title {
+  overflow: visible;
+}
 div.container.theme--g90 .bx--cc--meter-title text.meter-title,
+div.container.theme--g90 .bx--cc--meter-title text.proportional-meter-title,
+div.container.theme--g90 .bx--cc--meter-title text.proportional-meter-total,
 div.container.theme--g90 .bx--cc--meter-title text.percent-value {
   fill: #f4f4f4;
 }
@@ -20487,6 +20516,11 @@ div.container.theme--g90 .bx--cc--scatter g.lines path.line {
 div.container.theme--g90 .bx--cc--meter rect.container {
   fill: #393939;
 }
+div.container.theme--g90 .bx--cc--meter line.rangeIndicator {
+  stroke: #a8a8a8;
+  stroke-width: 1px;
+  stroke: #6f6f6f;
+}
 div.container.theme--g90 .bx--cc--meter rect.value.status--danger {
   fill: #ff8389;
 }
@@ -23784,6 +23818,8 @@ div.container.theme--g100 div.bx--cc--legend {
   user-select: none;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
+}
+div.container.theme--g100 div.bx--cc--legend[data-name=legend-items] {
   margin: -5px;
 }
 div.container.theme--g100 div.bx--cc--legend div.legend-item {
@@ -24222,7 +24258,12 @@ div.container.theme--g100 .layout-child.title {
   height: unset !important;
   overflow: hidden;
 }
+div.container.theme--g100 .bx--cc--meter-title {
+  overflow: visible;
+}
 div.container.theme--g100 .bx--cc--meter-title text.meter-title,
+div.container.theme--g100 .bx--cc--meter-title text.proportional-meter-title,
+div.container.theme--g100 .bx--cc--meter-title text.proportional-meter-total,
 div.container.theme--g100 .bx--cc--meter-title text.percent-value {
   fill: #f4f4f4;
 }
@@ -24896,6 +24937,11 @@ div.container.theme--g100 .bx--cc--scatter g.lines path.line {
 div.container.theme--g100 .bx--cc--meter rect.container {
   fill: #262626;
 }
+div.container.theme--g100 .bx--cc--meter line.rangeIndicator {
+  stroke: #a8a8a8;
+  stroke-width: 1px;
+  stroke: #6f6f6f;
+}
 div.container.theme--g100 .bx--cc--meter rect.value.status--danger {
   fill: #fa4d56;
 }