amcharts / amcharts5

The newest, fastest, and most advanced amCharts charting library for JavaScript and TypeScript apps.
Other
359 stars 96 forks source link

How to remove the grid lines #1361

Closed workingbuddy10 closed 9 months ago

workingbuddy10 commented 9 months ago

I want to remove the grid lines in the stock chart, but I want to keep the label dotted line.

I tried this : valueAxis.get("renderer").grid.template.set("visible", false); But it is also removing the label price dotted line.

Remove the background grid line ( red color marked ) & and keep the Label dotted line ( yellow color marked) : image

zeroin commented 9 months ago

Yes, you should set:

yAxis.get("renderer").grid.template.set("forceHidden", true)

And then set forceHidden:false for the grid of your axis range:

rangeDataItem.get("grid").set("forceHidden", false)

workingbuddy10 commented 9 months ago

I did this : image

But it is showing error : Cannot read properties of undefined (reading 'get') at rangeDataItem

I am using stock chart with GaplessDateAxis

@zeroin

zeroin commented 9 months ago

rangeDataItem is a data item which you created for the red color marker, it's not a property of an axis.

workingbuddy10 commented 9 months ago

I am creating label like the given in the below code and I have tried this : currentGrid.set("visible", false)

But it didn't worked, I have also added : valueAxis.get("renderer").grid.template.set("forceHidden", true)

Below is the full code for the label only :

  _createUpdateLabel(lastData) {
    //label property
    if (!this.currentValueDataItem) {
      let currentValueDataItem = this.valueAxis.createAxisRange(
        this.valueAxis.makeDataItem({ value: 0 })
      );
      this.currentValueDataItem = currentValueDataItem;
    }

    let currentLabel = this.currentValueDataItem.get("label");
    if (currentLabel) {
      currentLabel.setAll({
        fill: am5.color(0xffffff),
        background: am5.Rectangle.new(this.instance, {
          fill: am5.color(0x000000),
        }),
      });
    }
    let currentGrid = this.currentValueDataItem.get("grid");
    if (currentGrid) {
      currentGrid.setAll({ strokeOpacity: 0.5, strokeDasharray: [2, 5] });
    }
    {
      let closeValue = lastData.Close;
      let openValue = lastData.Open;

      this.currentValueDataItem.animate({
        key: "value",
        to: closeValue,
        duration: 500,
        easing: am5.ease.out(am5.ease.cubic),
      });

    // this.currentValueDataItem.set("visible", false)

      currentGrid.set("visible", false)

      currentLabel.set(
        "text",
        this.stockChart.getNumberFormatter().format(closeValue)
      );
      var bg = currentLabel.get("background");
      if (bg) {
        if (closeValue < openValue) {
          bg.setAll({
            fill:am5.color("#eb5b3c"),
          })
        } else {
          bg.setAll({
            fill:am5.color("#00b386"),
          })
        }
      }
    }
  }

@zeroin

zeroin commented 9 months ago

have you tried setting currentGrid.set("forceHidden", false)? You have to override the default setting which you set on template.

workingbuddy10 commented 9 months ago

Thanks it worked now ! @zeroin