@apexcura/ui-components 0.0.14-Beta123 → 0.0.14-Beta124

package/dist/index.js

@@ -1121,19 +1121,14 @@ var CircleDonut = (props) => {
       legend: {
         position: "left",
         labels: {
+          boxWidth: 15,
           generateLabels: (chart) => {
             const dataset = chart.data.datasets[0];
             return chart.data.labels.map((label, index) => {
               const value = dataset.data[index];
               return {
                 text: `${label}: ${value}`,
-                fillStyle: dataset.backgroundColor[index],
-                hidden: isNaN(dataset.data[index]) || dataset.data[index] === null,
-                index,
-                boxWidth: 20,
-                // Set the width of the legend box
-                borderColor: "transparent"
-                // Eliminate the border color
+                fillStyle: dataset.backgroundColor[index]
               };
             });
           }
@@ -1221,10 +1216,9 @@ var import_chart3 = require("chart.js");
 import_chart3.Chart.register(import_chart3.BarElement, import_chart3.CategoryScale, import_chart3.LinearScale, import_chart3.Tooltip, import_chart3.Legend);
 var HorizontalBarChart = (props) => {
   const data = {
-    labels: ["65+", "55-64", "45-54", "35-44", "25-34", "18-24"],
+    labels: ["18-24", "25-34", "35-44", "45-54", "55-64", "65+"],
     datasets: [
       {
-        label: "Bot Conversation",
         data: [30, 10, 27, 40, 12, 24],
         backgroundColor: "#6298D5"
       }
@@ -1235,7 +1229,12 @@ var HorizontalBarChart = (props) => {
     indexAxis: "y",
     scales: {
       x: {
-        beginAtZero: true
+        beginAtZero: true,
+        ticks: {
+          callback: function(value) {
+            return `${value}%`;
+          }
+        }
       }
     },
     plugins: {

package/dist/index.mjs

@@ -1064,19 +1064,14 @@ var CircleDonut = (props) => {
       legend: {
         position: "left",
         labels: {
+          boxWidth: 15,
           generateLabels: (chart) => {
             const dataset = chart.data.datasets[0];
             return chart.data.labels.map((label, index) => {
               const value = dataset.data[index];
               return {
                 text: `${label}: ${value}`,
-                fillStyle: dataset.backgroundColor[index],
-                hidden: isNaN(dataset.data[index]) || dataset.data[index] === null,
-                index,
-                boxWidth: 20,
-                // Set the width of the legend box
-                borderColor: "transparent"
-                // Eliminate the border color
+                fillStyle: dataset.backgroundColor[index]
               };
             });
           }
@@ -1177,10 +1172,9 @@ import {
 ChartJS3.register(BarElement, CategoryScale, LinearScale, Tooltip3, Legend3);
 var HorizontalBarChart = (props) => {
   const data = {
-    labels: ["65+", "55-64", "45-54", "35-44", "25-34", "18-24"],
+    labels: ["18-24", "25-34", "35-44", "45-54", "55-64", "65+"],
     datasets: [
       {
-        label: "Bot Conversation",
         data: [30, 10, 27, 40, 12, 24],
         backgroundColor: "#6298D5"
       }
@@ -1191,7 +1185,12 @@ var HorizontalBarChart = (props) => {
     indexAxis: "y",
     scales: {
       x: {
-        beginAtZero: true
+        beginAtZero: true,
+        ticks: {
+          callback: function(value) {
+            return `${value}%`;
+          }
+        }
       }
     },
     plugins: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.14-Beta123",
+  "version": "0.0.14-Beta124",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",