Change symbol for a single point in a Scatter Chart?

[lamarant]

Hi, I am new to HighCharts. Is there any way to change the symbol for a single data point on a scatter chart? EG: my series uses 'square' as its symbol. If the data value is > 10, I want the symbol to change to a png image that I've created.

possible?

[torstein.honsi]

Yes. See http://jsfiddle.net/CAKQH/1008/. Set a url instead of the square in the example.

[lamarant]

Thanks Torstein...I got the symbol for a specific point to change to a graphic that set right in the data series:

Code: Select all

data: [
  {x:152,y:1,marker:{symbol: 'url(e.png)'}}, 
  [155, 2], 
  [172, 3], 
  [176, 4], 
  [182, 5], 
  [198, 6]
] 

Taking this a step further...

Is it possible for the symbol to be a letter that has the same color as the other points in the series?

Here is some background of what I am trying to achieve:

I have multiple series that need to be plotted on a scatter chart. Each series will be identified by it's own unique symbol and color (all handled perfectly in highcharts so far). Within each series, in addition to the X and Y values, I have third dimension that determines the type of point. This dimension can be represented by a letter (I will manually add a key to the chart that shows what each letter represents) but the color of the letter must match the color of the other points within its same series.

Ideally, an additional option for the "symbol" property would be "character" and the value could then be set to any character on the keyboard (or even an HTML character code if necessary) and the character would then inherit the color of the associated series.

Another way I'm thinking (what I'm trying to do) would be for me to create .png image for each letter I need. The image would have a solid white canvas (or color that matches the plot area background) with the letter portion of the image being transparent. The only thing I would then have to do is assure that the background of that image is set to the background of the associated series and then, since the image is a .png, the color would show through the transparent area of the solid canvas. This method would also allow users to create any custom shape (not just letters) that retains the series color as well.

Hope that makes sense. I realize that this may be a unique request but this would allow a more flexible way to add a third dimension to X/Y type plots.

Any help would be greatly appreciated!

[not]

You can use marker symbol as shape or image alternatively - never in the same time.
However, you could use two series. The first one (line) can have circle symbols on markers (a little bigger then default). The second series should be a scatter type and should have exactly the same data as the first one has. Then you can use any transparent graphics (x-png) on the markers of scatter.

[lamarant]

Excellent!

Here is the workaround I used:

Code: Select all

data: [
  {x:152,y:1},
  {x:155,y:2}, 
  {x:172,y:3}, 
  {x:176,y:4}, 
  {x:182,y:5,marker:{symbol: 'url(e.png)'}}, //<--Added this duplicate data point.
  {x:182,y:5},
  {x:198,y:6}
  ] 

The duplicate with the symbol has to be added BEFORE the regular data point for it to show through. I use a point radius of 8 in my charts and my images are 10px x 10px. The image consists of a transparent background with the letter centered on the canvas, in white, having a font size of 9px. This way any symbol that is used in the chart can be overlayed with a white letter regardless of shape used in the chart.

While this workaround works fine, if I can suggest that a property be added in the "marker" class that would allow an option to turn on the background color of the image, that would be easier.

something like:

Code: Select all

   {x:182,y:5,marker:{symbol: 'url(e.png)', symbolBgColor: 'on'}}

Thanks again!!!