Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug]: Cannot import labels enum

See original GitHub issue

Contact Details

No response

What happened?

Typescript error

Type '"labels"' is not assignable to type 'ScaleTypes'

And if I try to import it I get a different error:

import { ScaleTypes } from "@carbon/charts/interfaces/enums";

import * as EventEnums from './events';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Promise.all (index 0)

Version

“@carbon/charts-svelte”: “^0.54.0”

Data & options used

<script lang="ts">
  // import { ScaleTypes } from "@carbon/charts/interfaces/enums"
  import { BarChartSimple } from "@carbon/charts-svelte";
  import "@carbon/charts/styles.min.css";
  import "carbon-components/css/carbon-components.min.css";
</script>

<BarChartSimple
  data={[
    { group: "Qty", value: 65000 },
    { group: "More", value: 29123 },
    { group: "Sold", value: 35213 },
    { group: "Restocking", value: 51213 },
    { group: "Misc", value: 16932 },
  ]}
  options={{
    title: "Simple bar (discrete)",
    height: "400px",
    axes: {
      left: { mapsTo: "value" },
      bottom: { mapsTo: "group", scaleType: "labels" },
    },
  }}
/>



### Relevant log output

```js
Error: Type '"labels"' is not assignable to type 'ScaleTypes'. (ts)
      left: { mapsTo: "value" },
      bottom: { mapsTo: "group", scaleType: "labels" },
    },



### Codesandbox example

_No response_

Issue Analytics

State:
Created 2 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

R-Bowercommented, Feb 10, 2022

I’m seeing this same issue with @carbon/charts-react.
@metonym you may be able to get away with applying as any to the labels field, like so:

<GroupedBarChart
      data={data}
      options={{
        axes: {
          bottom: {
            mapsTo: "value",
          },
          left: {
            mapsTo: "key",
            scaleType: "labels" as any,
          },
        },
        height: "320px",
        width: "500px",
      }}
    />

0reactions

theiliadcommented, Apr 23, 2022

Hi @leetrout,

Pls let us know if @metonym’s proposed solutions solves this issue for you https://github.com/carbon-design-system/carbon-charts/issues/1255#issuecomment-1023867195

Closing for now, feel free to reopen with additional details 🙂