Marker image on multiple datapoints with multiple lines

[Elanchezhiyan]

Hi Team,
We are using line chart for plotting with our datapoints. We tried to use custom markers as diamond shape is not available to use in datapoints as like circle/triangle (If available, please let us know). While using custom markers, we are not able to point more than one line. Attached JSFiddle link for your reference.

[Ranjitha R]

@elanchezhiyan,

In case of multi-series chart, you can loop through dataseries and pass dataseries index as well to position the image over the chart. Please find the code-snippet below.

function addMarkerImages(chart) {
  for(var i = 0; i < chart.data.length; i++) {
    customMarkers[i] = [];
    for (var j = 0; j < chart.data[i].dataPoints.length; j++) {
      customMarkers[i].push($("<img>").attr("src", chart.data[i].dataPoints[j].markerImageUrl)
                            .css("display", "none")
                            .css("height", 30)
                            .css("width", 30)
                            .appendTo($("#chartContainer>.canvasjs-chart-container"))
                           );
      positionMarkerImage(customMarkers[i][j], i, j);
    }
  }
}

Also, check out this JSFiddle for complete working sample.

—-
Ranjitha R
Team CanvasJS

[Elanchezhiyan]

@ranjitha-r,
Thanks for the info. It works fine.

[Elanchezhiyan]

@Ranjitha-R,
How do I hide the custom image when we try to zoom the graph? It is getting populated out of the graph, which looks awkward. Attached image for your reference.

[Elanchezhiyan]

Please use this image: Custom images to hide when zooming in

[Ranjitha R]

@elanchezhiyan,

You can position the image relative to viewport of the chart using rangeChanged event that would trigger whenever the chart range is changed by zooming/panning. Please find the code-snippet below.

 if(chart.data[dsIndex].dataPoints[dpIndex].x > chart.axisX[0].viewportMinimum && chart.data[dsIndex].dataPoints[dpIndex].x < chart.axisX[0].viewportMaximum) {
    customMarker.css({display: "block"})
  }
  else {
    customMarker.css({display: "none"})
  }

Also, take a look at this JSFiddle for complete working sample.

—-
Ranjitha R
Team CanvasJS

[Elanchezhiyan]

@Ranjitha-R,
Thanks and it works fine.

[Elanchezhiyan]

@Ranjitha-R,

In the previous post, we have used image with URL. If the SVG image is used, how do i fill the color based on the line color which is given dynamically? Attached image for your reference.

Image: SVG Image URL to fill color

[Ranjitha R]

@elanchezhiyan,

Changing the color of SVG image can be done by applying filter property. You can use hexToCSSFilter package to do so. You can set the color of the SVG images to the color of particular dataseries as shown in the code snippet below.

for (var j = 0; j < chart.data[i].dataPoints.length; j++) {
      customMarkers[i].push($("<img>").attr("src", chart.data[i].dataPoints[j].markerImageUrl)
                            .css("display", "none")
                            .css("height", 5)
                            .css("width", 5)
                            .css("filter", hexToCSSFilter(chart.data[i].color))
                            .appendTo($("#chartContainer>.canvasjs-chart-container"))
                           );
      positionMarkerImage(customMarkers[i][j], i, j);
    }

Also, check out this JSFiddle for working sample.

Ranjitha R
Team CanvasJS

[Elanchezhiyan]

Hi @Ranjitha-R,

We have tried to use the above example in our code. But we get an error that Uncaught ReferenceError: hexToCSSFilter is not defined. Can you send us the function which you have used in the fiddle? Attached image for your reference.

URL

[Ranjitha R]

@elanchezhiyan,

Based on the image shared by you, it seems like you have not added the hexToCSSFilter package in your code. Adding hex-to-css-filter.js package should work fine in your case.

—
Ranjitha R
Team CanvasJS

[Elanchezhiyan]

Thanks @Ranjitha-R