Highlight a volume or bar using JavaScript

[myTeeChart219]

I'm trying to recreate the attached image using javascript. I want to highlight a specific bar with a specific colour.

Something like:

Code: Select all

  Chart1.series.items[0].data.values[117].format.stroke.fill="red";
or
Chart1.series.items[0].data.ValuesIndex[117].ValueColour("red");


How would I do that?

I'd appreciate any suggestions or help on how to achieve it. Many thanks.

[Yeray]

Hello,

You could set a color for each point in a series. Ie:

Code: Select all

            var barSeries1 = Chart1.addSeries(new Tee.Bar()).addRandom(50);
           
            barSeries1.palette.colors = [];
            for (var i=0; i<barSeries1.count(); i++) {
                if (i!=5)
                    barSeries1.palette.colors[i] = barSeries1.format.fill;
                else
                    barSeries1.palette.colors[i] = "red";
            }

[myTeeChart219]

Thanks for the quick response, but unfortunately I can't get this to work using your volume graph demo?

Taking the volume example from your demo, I added the code below and nothing changes:

Code: Select all

            volume.palette.colors = [];
            for (var i=0; i<volume.count(); i++) {
                if (i<100)
                    volume.palette.colors[i] = volume.format.fill;
                else
                    volume.palette.colors[i] = "red";
            }


Using your own demo with this addition should make the remaining 100 random bars red. But they don't?

Please help.
Thank you.

[Yeray]

Hello,

It does it for me here:

chrome_2017-04-21_12-54-42.png (22.17 KiB) Viewed 983 times

[myTeeChart219]

That's great Yeray - but not for me

Would you be kind enough to send me your example. I've tried this in Chrome and IE and cannot get it to work.

I'm using version "TeeChart_for_JavaScript_Non_Commercial_v2015.05.02.1.8"? Is this the correct version? Here's my function:

Code: Select all

function draw() {

  Chart1=new Tee.Chart("canvas");

  // Create series:
  var volume=Chart1.addSeries(new Tee.Volume());

   volume.palette.colors = [];
     for (var i=0; i<volume.count(); i++) {
        if (i<100)
           volume.palette.colors[i] = volume.format.fill;
        else
           volume.palette.colors[i] = "red";
         }
       
// Random data:

  var value=Math.random()*10;
  for(var t=0; t<200; t++) {
    value+=Math.random()*20-10;
    volume.data.values.push(value);
  }

  // Cosmetics:

  Chart1.legend.visible=false;
  Chart1.axes.bottom.title.text="Session";
  Chart1.axes.bottom.grid.visible=false;
  Chart1.axes.left.title.text="Quantity";
  Chart1.title.text="Volume Series";



  Chart1.draw();
}

[Marc]

Hello,

Just checked and the latest inhouse, pre-release version contains a bugfix that resolves the Volume colour for this test code. For the current, publicly available version the test code will work for Bar Series, setting the fill colour for the bars but is not correctly applying to the Volume Series (Stroke Color).

We will publish the updated version at the beginning of next week for general availablility.

Apologies for the inconvenience caused.

Regards,
Marc Meumann