Skip to content
Advertisement

Dynamic colors and y-Axis descriptions in Highcharts

In a diagram I want to visualize the availability of Data depending on the user input. For that I want to use Highcharts and figured out that the “xrange”-diagram type would fit my needs the best. the representation of the data itself works fine but I have two problems:

  • Color of the bar: all bars have the same blueish color. As seen in the example I tried to set a color what did not work. Im looking for a solution where each bar gets its own color without me explicitly defining one.

  • y-axis description: I want the name of the station to be shown on the y-Axis. As seen in the example only one (village1) is shown on the axis

  • Scrolling the x-Axis when zoomed in: the user should be able to scroll through the x-axis after he zoomed in

Link to JSFiddle example

var diadata=[{}];
var names=[];
var title="Some available Data";

name1="village1"
name2="village2"

function displayStation1(){
    names.push(name1);
  diadata.push({
    x:Date.UTC(2020,1,1),
    x2:Date.UTC(2020,6,6),
    y:0
  })
  diag.addSeries({
    name:name1,
    data: diadata,
    color: "#FF0000"
  })
}

function addStation2(){
    diadata=[];
    names.push(name2);
  diadata.push({
    x:Date.UTC(2020,2,2),
    x2:Date.UTC(2020,3,3),
    y:0
  })
  diadata.push({
    x:Date.UTC(2020,4,4),
    x2:Date.UTC(2020,5,5),
    y:0
  })
  diag.addSeries({
    name:name2,
    data: diadata,
    color: "#FF0000"
  })
}


document.addEventListener('DOMContentLoaded', function() {
   diag = new Highcharts.chart('diagram', {
   chart: {
        height:250,
        type: 'xrange',
        zoomType: 'x'
    },
    title: {
        text: title
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: names,
        reversed: true
    },
    series: [{
        borderColor: 'gray',
        pointWidth: 20,
        data: diadata,
        dataLabels: {
            enabled: true
        }
    }]
   });

});

Advertisement

Answer

The first two requirements are quite easy to achieve.

  • You will need to define color in your point options:

    diadata.push({
  x: Date.UTC(2020, 1, 1),
  x2: Date.UTC(2020, 6, 6),
  y: 0,
  color: 'blue'
})

  • yAxis – if you want to add your second series in the second row and display the yAxis category, you will need to define on which of the rows this series should be displayed, by setting the y:

    diadata.push({ x: Date.UTC(2020, 2, 2), x2: Date.UTC(2020, 3, 3), y: 1, color: ‘green’ })

  • This one is quite tricky. The scrollbar is not implemented in the Highcharts, but in the Highstock.

Please analyze this custom solution in the Highcharts: Highcharts Zooming with Scroll Bar

Or this one using the Highstock: Highcharts display scrollbar when zooming

Demo: https://jsfiddle.net/BlackLabel/npotr1x3/

Advertisement