Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

highlightColor alpha seems to be ignored #958

pareeohnos opened this Issue Feb 13, 2013 · 5 comments


None yet
2 participants

I'm setting the highlightColor of my series to "rgba(0, 0, 0, 0.5)" however the final result is the right colour but with an alpha of 1. It completely ignores my alpha value.

Is there a way around this or is it just a bug?


I've done a little test, and changing the drawBarHighlight method, I can set the alpha but it feels a little hacky. I've changed the method to the following :

function drawBarHighlight(series, point) {
        var highlightColor = (typeof series.highlightColor === "string") ? series.highlightColor : $.color.parse(series.color).scale('a', 0.5).toString(),
            fillStyle = highlightColor,
            barLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2;

        octx.globalAlpha = 0.5;
        octx.lineWidth = series.bars.lineWidth;
        octx.strokeStyle = highlightColor;

        drawBar(point[0], point[1], point[2] || 0, barLeft, barLeft + series.bars.barWidth,
                0, function () { return fillStyle; }, series.xaxis, series.yaxis, octx, series.bars.horizontal, series.bars.lineWidth);

        octx.globalAlpha = 1;

The only thing I've changed here is the setting of the globalAlpha. I've got it hard coded for now but this could be changed to be dynamic I guess.


dnschnur commented Feb 14, 2013

I can't reproduce this in master. What version are you using? Can you show us some of your code?

I'm currently using the 0.8 alpha on the master branch. The version as of about 4 or 5 days ago.

For the chart settings, I'm using :

var commonSettings = {
  series: {
    stack: true,
    lines: {
      show: false,
      steps: false
    bars: {
      show: true,
      barWidth: .5,
      align: 'center',
      horizontal: true,
    highlightColor: "rgba(0, 0, 0, 0.5)",

  grid: Shine.charts.gridOptions,
  legend: Shine.charts.legendOptions,
  xaxis: Shine.charts.xAxisOptions,
  yaxis: Shine.charts.yAxisOptions

As you can see I'm specifying the highlight colour which is partly working in that it actually takes the right colour, but it simply ignores the alpha value.

The data I'm using varies depending on the user input, but I'm not having any issues with the chart itself so I doubt it's a data issue?

The plotting itself is pretty standard

colours = Shine.charts.chartColours.dataColours
        $.each(data, function(index, item){
          item["color"] = colours[index % colours.length];
        return $.plot(target, data, settings);

The only difference is I provide the user with the ability to specify their own colour palette, so when it renders, it attaches a colour to each bar. This shouldn't be altering the overlay colour though should it?


dnschnur commented Feb 14, 2013

The bar color is used as a default, but shouldn't come into play when the overlay color is specified. I've tested on Chrome and IE7/9, but still can't reproduce. Try editing /examples/interacting/index.html, replacing the series options with this:

bars: {
    show: true
highlightColor: "rgba(0, 0, 0, 0.5)"

Then please attach a screenshot of what you see on mouseover.

hm very confused. I've tried that and it worked as expected, then I uncommented my changes in my flot.js and it now seems to be working, so I have no idea what's going on there!

I'll keep an eye on it and see if it messes up again but it seems to be ok for now.
Sorry to waste your time :(

@ghost ghost assigned dnschnur Feb 15, 2013


dnschnur commented Feb 15, 2013

No worries; just glad it's sorted out!

@dnschnur dnschnur closed this Feb 15, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment