0

i'm trying to massage an xrange graph into a timeline like graph and have made an overall awesome widget but i'm running into problems with the Fit and Finish. I'd like to be able to have a YAxis Scrollbar so that i can have many 'Agents' shown in the same graph as well as having the bar darken when hovered over. Unfortunately i can't get any of the attributes from the Highcharts API to actually do anything - i am having the same problem using the jsFiddle they supply you with. See code snipit regarding yAxis and hover state. yAxis: { title: { text: '' }, minPadding: .11, scrollbar: { //todo not working - enabled: true, showFull: true }, categories: ['Prototyping', 'Development', 'Testing', 'a', 'b', 'c', 'd', 'e', 'f', 'g'], reversed: true },... states: { hover: { enabled: true, brightness: -0.9 //todo not working WTF } },

(link: https://jsfiddle.net/uaqp5tj7/16/#&togetherjs=uufALv7hEj)

if you have any ideas please let me know

Poncher
  • 53
  • 6

1 Answers1

2

First of all, you should not use both highcharts.js and highstock.js scripts, use only highstock and scrollbar will work.

To adjust scrollbar to your needs, you should set axis extremes, not the chart height:

yAxis: {
    min: 0,
    max: 2,
    ...
},

To achieve point hover effect, you can use mouseOver and mouseOut events:

series: [{
    point: {
        events: {
            mouseOver: function() {
                this.graphic.element.children[0].setAttribute(
                    'opacity', '0.5'
                );
            },
            mouseOut: function() {
                this.graphic.element.children[0].setAttribute(
                    'opacity', '1'
                );
            }
        }
    },
    ...
}]

Live demo: https://jsfiddle.net/BlackLabel/L9rx0vbg/

API Reference: https://api.highcharts.com/highstock/yAxis

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • That was it - so i needed to import /modules/stock.js so i could run highcharts and highstock on the same page (widgets of both types) thank you ! – Poncher Dec 18 '18 at 16:33
  • You need to use only `highstock` - it allow you to create `stockChart` and basic `chart`, please check this example: http://jsfiddle.net/BlackLabel/amu4qd7L/ – ppotaczek Dec 19 '18 at 11:40