0

Toggle method - on Click of bars show border and hide border. But Background should not change. Please refer my code, Do we have any toggle kind of method?.

Udhay
  • 35
  • 6

1 Answers1

0

Your code is not reproducible using previous code from this post

Updated It as follows

  plotOptions: {
    series: {
      events: {
        click: function(e) {
          var chart = e.point.series.chart;
          e.point.select(true, false); //at any time only one column is selected
          /*logic for toggle*/
          if (currSel !== e.point.index) {
            chart.series[0].data[e.point.index].graphic.attr({
              'stroke': colors[e.point.index],
              'stroke-width': width[e.point.index],
              'fill': Highcharts.defaultOptions.colors[e.point.index],
            });
            currSel = e.point.index;
          } else {
            chart.series[0].data[e.point.index].graphic.attr({
              'stroke': "",
              'stroke-width': 0,
              'fill': Highcharts.defaultOptions.colors[e.point.index],
            });
            currSel = "";
          }
        }
      },
    }
  },


var colors = ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE',
  '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'
];
var width = [2, 5, 6, 8, 9, 3, 4];
var currSel;
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Stacked bar chart'
  },
  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total fruit consumption'
    }
  },
  legend: {
    reversed: true
  },
  plotOptions: {
    series: {
      events: {
        click: function(e) {
          var chart = e.point.series.chart;
          e.point.select(true, false);
          if (currSel !== e.point.index) {
            chart.series[0].data[e.point.index].graphic.attr({
              'stroke': colors[e.point.index],
              'stroke-width': width[e.point.index],
              'fill': Highcharts.defaultOptions.colors[e.point.index],
            });
            currSel = e.point.index;
          } else {
            chart.series[0].data[e.point.index].graphic.attr({
              'stroke': "",
              'stroke-width': 0,
              'fill': Highcharts.defaultOptions.colors[e.point.index],
            });
            currSel = "";
          }
        }
      },
    }
  },
  series: [{
    name: 'John',
    data: [3, 4, 4, 2, 5],
    showInLegend: false,
    name: 'Twitter Trending',
    colorByPoint: true,
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Dmitry
  • 6,716
  • 14
  • 37
  • 39
Patata
  • 273
  • 3
  • 18
  • I need some modification for above code: We have column bar chart with bottom div section, It should be work as toggle method as onClick of each bar shows different color border [ background color no change ] and bottom content. And again second click it should be hide...I want like toggle option. Could you please help me. – Udhay Dec 20 '17 at 06:35
  • _bottom content_ means what I want more clarification – Patata Dec 20 '17 at 06:38
  • Bottom content contains one div. say for example ----
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
     – Udhay Dec 20 '17 at 07:19
  • There is no harm in asking this as a new post. It will be better I will answer there – Patata Dec 20 '17 at 07:26
  • i will create new post @patata – Udhay Dec 20 '17 at 09:00