Custom image for strip lines

[Elanchezhiyan]

Hi Team,
How can I add custom image to the Strip lines?. Attached image for your reference.

[Manoj Mohan]

@elanchezhiyan,

You can position the stripLine label either “inside” or “outside” using labelPlacement property. To add arrow to stripLine label, you can use unicode as shown in the code snippet below

axisX:{
  stripLines:[
    {      
      value:1935,
      label : "\u25B2",
      color: "red",
      labelFontColor: "red"
    }
  ]
}

Also, please check out this JSFiddle for complete code. You can refer to this Wikipedia page for a list of Unicode characters.

—-
Manoj Mohan
Team CanvasJS

[Elanchezhiyan]

Hi @Manoj-Mohan,
Thanks for the info. It is working fine.

[Elanchezhiyan]

Hi @Manoj-Mohan,
How can I show the inverted flag image on the other side of the strip line (Now, the flag is pointing to left side with related to left side of the strip line. It should show as like on right side of the strip line with the flag pointing towards right?). We have tried with the Unicode char but it does not work out.

[Elanchezhiyan]

Hi @Manoj-Mohan,
We need to show the flag on other side, we have tried to use the Unicode \u25B6. But we are not able to do that. Also, we have used the labelPlacement. This also gets fails. Attached image for your reference.

Custom image for strip lines

[Manoj Mohan]

@elanchezhiyan,

In order to show flag on other side, you need to add one dummy stripline with label as unicode “\u2BC6”. Please take a look at the code snippet below to add dummy stripline

function addDummyStripeLine(value, chart) {
  	chart.axisX[0].addTo("stripLines", {
      label : "\u2BC6",
      value: 1935 + chart.axisX[0].convertPixelToValue(chart.axisX[0].stripLines[0].get("labelFontSize") + 5 + chart.axisY[0].bounds.x2) - chart.axisX[0].viewportMinimum,
      color: "transparent",
      labelFontColor: "red"
    })
  }

Also, check out this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS