CODEWITHSUNDEEP
react-nativehighcharts
Loofer
Loofer

Reputation: 6973

How do I disable interaction on a Highcharts chart?

In my react native application I have a Highcharts chart displaying some bar chart info.

I want to display the legend, so people know what the chart is showing, but I want to disable the functionality that hides bars when the legend is touched.

Additionally the bars themselves fade in and out when you press them... I have disabled the 'tooltip' but the fading still happens, how can I stop this?

If I could render to a static image that would be ideal!

just for info the code is 

let Highcharts = "Highcharts";
const conf = {
  chart: {
    type: "column",
    animation: false,
    marginRight: 10,
    dateFormat: "dd/mm/YYYY"
  },
  title: {
    text: "Spread Events"
  },
  xAxis: {
    type: "datetime",
    tickPixelInterval: 50
  },
  yAxis: {
    title: {
      text: "Spread"
    },
    plotLines: [
      {
        value: 0,
        width: 1,
        color: "#808080"
      }
    ]
  },
  tooltip: { enabled: false },
  legend: {
    enabled: true
  },
  exporting: {
    enabled: false
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: FieldStore.graphData.slice()
};

Upvotes: 1

Views: 1961

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

To disable hiding series on legend click, return false from legendItemClick event function.

To disable a tooltip and the fading effect on series hover set enableMouseTracking to false. If you want to also turn off the fading effect on legend hover, change opacity in inactive state:

plotOptions: {
    series: {
        enableMouseTracking: false,
        states: {
            inactive: {
                opacity: 1
            }
        },
        events: {
            legendItemClick: function() {
                return false;
            }
        }
    }
}

Live demo: http://jsfiddle.net/BlackLabel/gjkprbto/

API Reference:

https://api.highcharts.com/highcharts/series.bar.enableMouseTracking

https://api.highcharts.com/highcharts/series.bar.events.legendItemClick

https://api.highcharts.com/highcharts/series.bar.states.inactive.opacity

Upvotes: 4

Related Questions