highchart legend symbol is not appearing, for holo column

0
votes

I wanted to show Bar(column) chart using HighChart, but bar chart should show holo columns(transparent column with borders). For this purpose I set color and borderColor as follows

    plotOptions: {
    series: {
        color: Highcharts.Color('#000000').setOpacity(0).get('rgba'),//'#000000'
        borderColor: '#000000'
    }
},

but it is not showing series symbol in legends, as shown in this jsFiddle. Is there anyway to show series symbol in Legends, keeping columns(bars) to appear holo(transparent with visible borders).

3
highcharts
series color is #000000, so legend symbols not appearing – Deep 3015
yes. this is because I set it, to make columns holo, and I already know this reason. I wanted to know, is there any way to set symbol to appear in border color of the series? – Abdul Qadir Memon

3 Answers

1
votes

I am using ideas from Style by CSS from highcharts to customize the label

Fiddle link

css

.highcharts-legend-item * { /*for default case*/
  fill: black !important;
}

.highcharts-legend-item-hidden * { /*when clicked*/
  fill: gray !important;
}
0
votes

The legend symbol is not showing because it's color has the opacity 0, the same as the serie. Couldn't find anything that would allow you to set the color of the marker, but i have a workaround. You can format the legend label with the symbol, here you can find some of those symbols http://www.fileformat.info/info/unicode/block/geometric_shapes/list.htm

Here is the code to hide the legend symbol when it's hidden and format it's label.

legend: {
        symbolPadding: 0,
        symbolWidth: 0.001,
        symbolHeight: 0.001,
        symbolRadius: 0,
        labelFormatter: function () {
             return "◼ " + this.name;
    }
},

full fiddle here http://jsfiddle.net/hfuuocdw/2/

0
votes

I fixed it by setting color and border color of each series, and then adding a css style for "fill" to be transparent, as shown in this fiddle.

.highcharts-series-group .highcharts-point {
  fill: rgba(0,0,0,0)
}