apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.34k stars 1.3k forks source link

How to use background image for column chart? #2029

Closed kentforth closed 3 years ago

kentforth commented 3 years ago

I have a column chart with datalables. I want to use images instead of color for every column in chart Is it possible to make image as background for every column? How can I do it?

My Chart:

series: [
      {
        name: "Teamfight Win Rates",
        data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8],
      },
    ],    
    chartOptions: {
      chart: {
        height: 350,
        type: "bar",
        foreColor: "#FFEDFF",
      },
      plotOptions: {
        bar: {
          distributed: true,
          dataLabels: {
            position: "top", // top, center, bottom
          },
        },
      },

      dataLabels: {
        enabled: true,
        formatter: function (val) {
          return val + "%";
        },
        offsetY: -20,
        style: {
          fontSize: "14px",
        },
      },
      xaxis: {
        categories: [
          "Shock",
          "Fuel",
          "Excelsior",
          "Dynasty",
          "Outlaws",
          "Fusion",
          "Gladiators",
          "Spitfire",
          "Valiant",
          "Dragons",
        ],
        position: "top",
        axisBorder: {
          show: false,
        },
        axisTicks: {
          show: false,
        },
        tooltip: {
          enabled: true,
        },
      },

      yaxis: {
        axisBorder: {
          show: false,
        },
        axisTicks: {
          show: false,
        },
        labels: {
          show: false,
          formatter: function (val) {
            return val + "%";
          },
        },
      },
      tooltip: {
        theme: "dark",
      },
    }
junedchhipa commented 3 years ago
var options = {
  chart: {
    type: "bar",
    height: "auto"
  },
  series: [
    {
      name: "sales",
      data: [30, 40, 45, 50]
    }
  ],
  plotOptions: {
    bar: {
      distributed: true
    }
  },
  fill: {
    type: "image",
    opacity: 1,
    image: {
      src: [
        "https://cdn.pixabay.com/photo/2017/07/03/20/17/abstract-2468874_1280.jpg",
        "https://cdn.pixabay.com/photo/2016/10/29/10/16/abstract-1780386_1280.png",
        "https://cdn.pixabay.com/photo/2016/12/15/20/21/texture-1909992__340.jpg",
        "https://cdn.pixabay.com/photo/2020/01/06/16/20/abstract-4745656_1280.jpg"
      ]
    }
  },
  xaxis: {
    categories: [1991, 1992, 1993, 1994]
  },
  legend: {
    show: false
  }
};

Screenshot 2020-11-09 at 12 23 22 PM

Example - https://codepen.io/apexcharts/pen/GRqYWdQ?editors=0010

kentforth commented 3 years ago

Thank you!