Flatline...

[jgperrin]

I made my first graph and it displays a nice flat line... When I hover the line I see the correct values, ranging from about 4,000 to 12,000, but the scale goes to 10,000,000. I do not have any value in this range. I attached 2 screenshots.

Here is my code:

import React from "react";
import { LineChart } from "@carbon/charts-react";
import { DataProps } from "./DataProps";
import * as D3 from "d3";

type GraphDot = { group: string; x: Date | number; y: number };

export default class ChartView extends React.Component<DataProps, {}> {
  data: D3.DSVRowArray<string>;
  metadata: any;
  datax: GraphDot[] = [];

  constructor(props: any) {
    super(props);
    this.data = props.data;
    this.metadata = props.metadata;
  }

  options: any = {
    title: "",
    axes: {
      bottom: {
        title: "Month of",
        mapsTo: "x",
        scaleType: "time",
      },
      left: {
        mapsTo: "y",
        title: "Value",
        max: 10000,
      },
    },
    experimental: true,
    zoomBar: {
      top: {
        enabled: true,
      },
    },
    //curve: "curveMonotoneX",
    height: "600px",
  };

  private prerender(): React.ReactElement {
    if (this.data == null) {
      return <div>No data</div>;
    }

    if (this.metadata == null) {
      return <div>No metadata</div>;
    }

    let rowId: number = 0;
    let metaX = this.metadata[0].key; // value on X
    let metaY = this.metadata[1].key; // value on Y
    let metaGroup: string = this.metadata[1].header; // header of col
    console.log(metaX + "/" + metaY + "/" + metaGroup);

    this.data.map((row: any) => {
      let x: any = row[this.metadata[0].key];
      let y: number = row[this.metadata[1].key];
      this.datax.push({ group: metaGroup, x: x, y: y });
      rowId++;
    });
    console.log("Processed " + rowId + " rows");

    return (
      <LineChart data={this.datax} options={this.options}></LineChart>
    );
  }

  render = () => this.prerender();
}

[theiliad]

Hi, thanks for reaching out 👋🏻

Could you pls use our codesandbox examples to reproduce this problem so I can look into it?

https://carbon-design-system.github.io/carbon-charts/react/?path=/story/simple-charts-line--line-discrete

[jgperrin]

Hi Eliad, Thanks for offering, I sent you an invite via CodePen to https://codesandbox.io/s/mystifying-hooks-s3xcq - I try to simplify the project as much as I could, but I am really a noob @ React & Typescript... If - by any chance - you could also save my Theme project, it would make my day :)

[theiliad]

I think the main issue I saw was that your y-values were strings. I added parseInt() and it's good now.

We should probably add a parseFloat() in charts

[theiliad]

Also, fixed your theme by changing your css import to @import "@carbon/charts/styles-g90.css";

[jgperrin]

Thanks! This is awesome, I'll be demoing it at All Things Open ;)