Stacked column with fill patterns

[sgjoshi]

Hi,

I want to create stacked columns with background fill patterns. CanvasJS provides a “color” attribute like in this code:

data: [{
                            type: "stackedColumn",
                            showInLegend: true,
                            color: "#ee88ee",
                            name: "Basalt",
                            dataPoints: [
                                {y: 0, x: 0},
                                {y: 0, x: 12},
                            ]
                        },

How can I use a custom pattern here instead of RGB color value?

Thanks,
Sudhir

[Vishwas R]

Sudhir,

Do you mean gradient as chart background? If so please take a look at this jsfiddle. However setting gradient as color is not available as of now.

If this doesn’t answer your requirements, can you kindly share pictorial representation of your requirement so that we can understand it better and help you out?

—
Vishwas R
Team CanvasJS

[sgjoshi]

Hi Vishwas,

Thanks for quick reply.

I dont need gradient, I need user defined JPG/PNG images as backgrounds instead of color specified in the data sample earlier. i.e. something like this:

data: [{
                            type: "stackedColumn",
                            showInLegend: true,
                            color: "url(images/sand.jpg)",
                            name: "Basalt",
                            dataPoints: [
                                {y: 0, x: 0},
                                {y: 0, x: 12},
                            ]
                        },

please note here I want to replace the hex color value with an image, typically used in web pages like
<div style="background:url('images/sand.jpg')">DIV Content goes here</div> wherein this DIV will have my image as background to the content.

So in a stacked column, say I have 4 data items in 1 column, I will have them with 4 different images. At present I can only specify hex value of a color.

I was unable to add a sample image here as the “img” tag of this editor needs a URL.
/Users/Sudhir/Desktop/column.png

Regards,
Sudhir

• This reply was modified 5 years, 11 months ago by sgjoshi.

[sgjoshi]

Never mind, I could get the desired result with another library..

• This reply was modified 5 years, 11 months ago by sgjoshi.

[Vishwas R]

Sudhir,

It’s possible to position image on top of chart with the help of convertValueToPixel method. Please take a look at this jsfiddle.

—
Vishwas R
Team CanvasJS

[sgjoshi]

Never mind… as I said I got the result with chartjs library which is free and its much easier that what your fiddle shows.

The example you gave is just a column, I needed stacked columns with each section of column with different image. Guess the same technique can be used for stacked columns too, but its far more easier in chartjs ..

thanks