Home forums Using CanvasJS Stacked column with fill patterns

This topic contains 5 replies, has 2 voices, and was last updated by  sgjoshi 6 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #20514

    sgjoshi
    Member

    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

    #20521

    Vishwas R
    Keymaster

    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

    #20525

    sgjoshi
    Member

    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.
    sample

    Regards,
    Sudhir

    • This reply was modified 6 months, 2 weeks ago by  sgjoshi.
    #20531

    sgjoshi
    Member

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

    • This reply was modified 6 months, 2 weeks ago by  sgjoshi.
    #20541

    Vishwas R
    Keymaster

    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

    #20576

    sgjoshi
    Member

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.