Y coordinate seems capped to a maximum

[thecashewtrader]

I am using hill-chart with SvelteKit on minb.

Initially the Hill Chart works fine, but when I save the x and y coordinates to the database and then refresh the page, the y coordinate seems to be capped to about half of the height.

I tried:

• different width x height combos
• adding a width and height to the <svg /> element before running hill.render()
• having a separate id (css selector, not to be confused with data point id) and target for each Hill Chart as I'm rendering multiple of them per document

but none of them worked.

I understand this issue is not fully clear, I'll hopefully add a minimal reproduction once I'm done with exams.

In the meantime, I looked into the source code and found this:

normalizeData() {
    this.data = this.data.map((point) => {
      return {
        id: point.id ? point.id : uId(),
        color: point.color,
        description: point.description,
        link: point.link,
        x: point.x ? point.x : 0,
        y: point.y ? point.y : hillFn(point.x ? point.x : 0),
        size: point.size ? point.size : 10,
      };
    });
  }

Saving only the x coordinate to the database works as expected, because the y coordinate is derived from it. I hope this workaround helps someone.

EDIT

Minimal reproduction

• Create a SvelteKit project using yarn create vite -> Svelte -> SvelteKit -> Skeleton Project
• cd into the project directory.
• Run yarn, yarn add hill-chart

• Add this code to src/routes/+page.svelte:

  
  <script lang="ts">
  import { onMount } from "svelte";
  import HillChart from "hill-chart";
  
  const createHillChart = () => {
  const hillChartData = [
    {
      color: "cyan",
      title: "Title",
      size: 10,
      x: 50,
      y: 50,
    },
  ];
  const hill = new HillChart(hillChartData);
  hill.render();
  
  hill.on("moved", (data: any) => {
    console.log(data.x, data.y);
  });
  };
  
  onMount(createHillChart);
  </script>

Minimal Reproduction

- Run `yarn dev`

## Expected Outcome

The item should be at `50, 50` like so:
![image](https://user-images.githubusercontent.com/81344401/195982259-bdb22943-432b-498d-bbf7-a2d714193b01.png)

## Observed Outcome

The item is at (what appears to be) `50, 25`:
![image](https://user-images.githubusercontent.com/81344401/195982282-dc3dd792-76eb-452a-9fba-a800d50c4409.png)

[nagi1]

Do you still have this issue?

[thecashewtrader]

I was trying to make a minimal reproduction, however ran into #33. I'll try to fix that and then check if it works.

[thecashewtrader]

Update: Unfortunately yes, I'm still having the issue, and I've added a minimal reproduction.

[wachri]

I had the same problem but found a workaround. If you only store the x coordinate the y coordinate get's automatically calculated when the chart is rendered. So before storing an update in the db set the y coordinate to undefined.