Home forums Chart Support Set image as a marker

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #14640

    Hello, i wanted to know that can we set an image as a marker. i am using splineGraph and i want to

      replace the circle marker with an image

    . Please reply as soon as possible.



    As of now markers can have only five possible values – “circle”, “square”, “triangle” , “cross” & “none”. However you can position images in place of markers using this work around. For further insight, please refer this how to section for positioning images over chart.

    Suyash Singh
    Team CanvasJS


    Hello @Suyash Singh, Thanks a lot for the quick response..
    This works perfectly….
    you guys have done a superb job..
    This saved me a lot of time..

                    pointer-events: none;
            <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>  
            <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
            <script type="text/javascript">
                window.onload = function () {
                    var dps = [{x: 0, y: 0, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}];
                    /*[{x: 1, y: 10, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}, 
                     {x: 2, y: 13, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}, 
                     {x: 3, y: 18, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}, 
                     {x: 4, y: 20, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}, 
                     {x: 5, y: 17, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}, 
                     {x: 6, y: 10, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}, 
                     {x: 7, y: 13, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}, 
                     {x: 8, y: 18, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}, 
                     {x: 9, y: 20, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}, 
                     {x: 10, y: 47, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"}]; */  //dataPoints. 
                    var chart = new CanvasJS.Chart("chartContainer", {
                        theme: "theme2", //theme1
                        backgroundColor: "transparent",
                        title: {
                            text: "Live Data"
                        axisX: {
                            title: "Velocity"
                        axisY: {
                            title: "Distance"
                        data: [
                                type: "spline",
                                markerType: "none",
                                dataPoints: dps
                    var xVal = dps.length + 1;
                    var yVal = 15;
                    var updateInterval = 1000;
                    var updateChart = function () {
                        yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
                        dps.push({x: xVal,y: yVal, markerImageUrl:  "http://i.imgur.com/TUmQf5n.png"});
                        if (dps.length > 10)
                        // update chart after specified time. 
                    setInterval(function () {
                    }, updateInterval);
                    var customMarkers = [];
                    function addMarkerImages(chart) {
                        for (var i = 0; i < chart.data[0].dataPoints.length; i++) {
                            customMarkers.push($("<img>").attr("src", chart.data[0].dataPoints[i].markerImageUrl)
                                    .css("display", "none")
                                    .css("height", 40)
                                    .css("width", 50)
                            positionMarkerImage(customMarkers[i], i);
                    function positionMarkerImage(customMarker, index) {
                        var pixelX = chart.axisX[0].convertValueToPixel(chart.options.data[0].dataPoints[index].x);
                        var pixelY = chart.axisY[0].convertValueToPixel(chart.options.data[0].dataPoints[index].y);
                        customMarker.css({"position": "absolute",
                            "display": "block",
                            "top": pixelY - customMarker.height() / 2,
                            "left": pixelX - customMarker.width() / 2
                    $(window).resize(function () {
                        for (var i = 0; i < chart.data[0].dataPoints.length; i++) {
                            positionMarkerImage(customMarkers[i], i);
            <div id="chartContainer" style="height: 300px; width: 100%;"></div>

    This is what i have done so far. For static data it is working fine, when i am trying to do it for dynamic data, don’t now why the dps.push function is not working. The graph is created but the image doesn’t appears. Please suggest what is wrong here. i am almost there.

    • This reply was modified 3 years, 10 months ago by NehaSingh. Reason: remove Extra code for better understanding

    And I also wanted to ask that I am using this for a college project and it is offline. I just read that trial version is only for 30 days so will I be able to use this after that???
    Can I use it offline… or it will stop working after the trial period.



    For dynamic data, updating the position of image after adding new dataPoint has to be handled as shown in this jsfiddle.

    Regarding your query about the Trial Version, our sales team have already mailed you and they will be assisting you further with your requirements.

    Suyash Singh
    Team CanvasJS



    I am going through few problems.
    1. I am showing live data from my database which is being updated every 2 seconds. Now after some time the marker disappears. For first few minutes it is displayed but not after that, is there any range? the line works fine. only i am not able to see the marker.

    2. i am using an image as a marker but i want to show the image only for the current position and the rest of the points should be any simple marker type. Is there any way to do that?

    Hoping to hear from you soon.



    1. Default Markers are automatically disabled when number of dataPoints are more. You can manually override the automatic disabling/enabling of markers by setting markerSize to a value equal to or greater than zero. Please have a look at this jsfiddle.

    2. You can show the marker image only for current dataPoint by placing the marker Image on top of the last dataPoint every time the chart is updated as in this jsfiddle.

    Suyash Singh
    Team CanvasJS

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

You must be logged in to reply to this topic.