javascript - how to decrease line thickness of a line chart in apex charts - Stack Overflow

admin管理员组

文章数量:1305272

I am using Apex charts in the angular project, I have implemented a time series chart there I am not able to decrease the "thickness of a line" in the line chart.

here is my config.

  public initChartData(): void {
  this.series =  this.response_data['data']
  this.chart = {
    type: "area",
    stacked: true,
    height: 350,
    zoom: {
      type: "x",
      enabled: true,
      autoScaleYaxis: false
    },

    toolbar: {
      autoSelected: "zoom",
      show: true,
      tools: {
      zoomin: false,
      zoomout: false,
    }
    },

  },

  this.dataLabels = {
    enabled: false
  };
  this.markers = {
    size: 0
  };
  this.stroke ={
    width: 1,
    curve: 'smooth',
  },

  this.fill = {
    type: "gradient",
    gradient: {
      shadeIntensity: 1,
      opacityFrom: 0.7,
      opacityTo: 0.9,
      stops: [0, 90, 100]
    },
    pattern: {
      strokeWidth: 0.5
    }
  };
  this.yaxis = {
    labels: {
      formatter: function(val) {
        return (val / 1).toFixed(0);
      }
    }
  };
  this.xaxis = {
    type: "datetime"
  };
  this.tooltip = {
    shared: false,
    y: {
      formatter: function(val) {
        return (val / 1).toFixed(0);
      }
    }
  };
}

can anyone help me with this code, I have tried other ways also but it didn't worked.

I am using Apex charts in the angular project, I have implemented a time series chart there I am not able to decrease the "thickness of a line" in the line chart.

here is my config.

  public initChartData(): void {
  this.series =  this.response_data['data']
  this.chart = {
    type: "area",
    stacked: true,
    height: 350,
    zoom: {
      type: "x",
      enabled: true,
      autoScaleYaxis: false
    },

    toolbar: {
      autoSelected: "zoom",
      show: true,
      tools: {
      zoomin: false,
      zoomout: false,
    }
    },

  },

  this.dataLabels = {
    enabled: false
  };
  this.markers = {
    size: 0
  };
  this.stroke ={
    width: 1,
    curve: 'smooth',
  },

  this.fill = {
    type: "gradient",
    gradient: {
      shadeIntensity: 1,
      opacityFrom: 0.7,
      opacityTo: 0.9,
      stops: [0, 90, 100]
    },
    pattern: {
      strokeWidth: 0.5
    }
  };
  this.yaxis = {
    labels: {
      formatter: function(val) {
        return (val / 1).toFixed(0);
      }
    }
  };
  this.xaxis = {
    type: "datetime"
  };
  this.tooltip = {
    shared: false,
    y: {
      formatter: function(val) {
        return (val / 1).toFixed(0);
      }
    }
  };
}

can anyone help me with this code, I have tried other ways also but it didn't worked.

• javascript
• angular
• apexcharts

Share Improve this question Follow asked Jan 21, 2021 at 12:18 baba vossbaba voss 5311 gold badge11 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You need to change the stroke of the line to make it more thicker or thinner.

Try changing the stroke object's width to see a variation in the same.

this.stroke ={ width: 0.5, // to make it half of the present or default thickness. curve: 'smooth', }

Refer the link for further info: https://apexcharts./docs/options/stroke/

本文标签： javascripthow to decrease line thickness of a line chart in apex chartsStack Overflow