CODEWITHSUNDEEP
javascriptangularapexcharts
baba voss
baba voss

Reputation: 53

how to decrease line thickness of a line chart in apex charts

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.

Upvotes: 3

Views: 13915

Answers (1)

Mohd Jawwad Hussain
Mohd Jawwad Hussain

Reputation: 135

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.com/docs/options/stroke/

Upvotes: 6

Related Questions