Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – ApexCharts type line – background color

i have a simple js, html file, im using ApexCharts and want to handle the positive and negative parts of chart.

3 things about it:

  1. markers style (handled already)
  2. line color (handled already)
  3. the background gradient below the line (problem)

is there any way to add a background to the line type chart below the line?

desired chart :
desired chart

  <div id="chart"></div>
  <script src="exp.js"></script>

const dataPoints = [-10, 3, -5, -18, -10, 12, 8]

const discreteMarkers = dataPoints.map((value, index) => {
  return {
    shape: "circle",
    size: 4,
    seriesIndex: 0,
    dataPointIndex: index,
    fillColor: "#ffffff",
    strokeColor: value >= 0 ? "#157446" : "#C13446",
    strokeWidth: 1,
  };
});

var options = {
  chart: {
    height: 380,
    type: "line",
    foreColor: '#aaa',
    zoom: {
      type: 'x',
      enabled: true,
      autoScaleYaxis: true
    },
  },
  series: [
    {
      name: "Series 1",
      data: dataPoints
    }
  ],
  stroke: {
    width: 5,
    curve: "monotoneCubic"
  },
  plotOptions: {
    line: {
      colors: {
        threshold: 0,
        colorAboveThreshold: '#157446',
        colorBelowThreshold: '#C13446',
      },
    },
  },
  markers: {
    discrete: discreteMarkers
  },
  grid: {
     borderColor: '#6D6D6D',
     strokeDashArray: 3,
  },
  xaxis: {
    categories: [
      "01 Jan",
      "02 Jan",
      "03 Jan",
      "04 Jan",
      "05 Jan",
      "06 Jan",
      "07 Jan"
    ]
  },
  stroke: {
      curve: 'smooth',
      width: 2
  },
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

here is a link to check output.
https://codepen.io/amirdoosti/pen/RNbQWPK

Tags:

2

Answers


  1. 0

    You can use the fill property to handle that! I try that solution in your codepen and this is the result (to achieve it I remove plotOptions)

    enter image description here

    fill: {
    type: "gradient",
    gradient: {
      shade: "light",
      type: "vertical",
      gradientToColors: ["#157446", "#C13446"], // Green for positive, red for negative
      shadeIntensity: 0.5,
      opacityFrom: 0.5,
      opacityTo: 0.1,
      stops: [0, 50, 100],
      colorStops: [
        {
          offset: 0,
          color: "#C13446", // Start with red
          opacity: 0.5,
        },
        {
          offset: 50,
          color: "#ffffff", // Middle white transition
          opacity: 0.2,
        },
        {
          offset: 100,
          color: "#157446", // End with green
          opacity: 0.5,
        },
      ],
    },
  },
    Login or Signup to reply.
  2. 0

    What you are trying to achieve is an "area" chart type, not "line" chart.

    Try changing your script to this:

    const dataPoints = [-10, 3, -5, -18, -10, 12, 8]

const discreteMarkers = dataPoints.map((value, index) => {
  return {
    shape: "circle",
    size: 4,
    seriesIndex: 0,
    dataPointIndex: index,
    fillColor: "#ffffff",
    strokeWidth: 1,
  };
});

var options = {
  chart: {
    height: 380,
    type: "area",
    foreColor: '#aaa',
    zoom: {
      type: 'x',
      enabled: true,
      autoScaleYaxis: true
    },
  },
  series: [
    {
      name: "Series 1",
      data: dataPoints
    }
  ],
  stroke: {
    width: 5,
    curve: "monotoneCubic"
  },
  plotOptions: {
    line: {
      colors: {
        threshold: 0,
        colorAboveThreshold: '#157446',
        colorBelowThreshold: '#C13446',
      },
    },
  },
  markers: {
    discrete: discreteMarkers
  },
  grid: {
     borderColor: '#6D6D6D',
     strokeDashArray: 3,
  },
  xaxis: {
    categories: [
      "01 Jan",
      "02 Jan",
      "03 Jan",
      "04 Jan",
      "05 Jan",
      "06 Jan",
      "07 Jan"
    ]
  },
  dataLabels: {
    enabled: false
  },
  
  stroke: {
      curve: 'smooth',
      width: 2
  },
  fill: {
    type: "solid",
    colors: ["#E6F4EA" ]
  },
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

    That would render this:

    Apex Area Chart with fill

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search