Question 269039 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Updating from/to plotBands values on input from a slider

I am trying to update my Highcharts plotBands dynamically with sliders on the page. I want both to and from to be attached to slider values and dynamically updated on the canvas as the user drags the sliders. Is that possible?

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>
<!-- <input id="range" type="range" /> -->



<div id="slider">
    <input class="bar" type="range" id="range-input" min="1" max="25" value="1"/>
    <span class="highlight"></span>
    <output id="range-value">1</output>
</div>

JS:


 var rangeInput = document.getElementById("range-input")
 var rangeValue = document.getElementById("range-value")

 rangeInput.oninput = rangeOutput
 
 function rangeOutput() {
   rangeValue.innerText = rangeInput.value
 }
 
 let bla = rangeInput.value;

Highcharts.chart('container', {
    chart: {
        marginTop: 5
    },
    title: {
        text: 'Flats sold per month'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    yAxis: {
plotBands: [{
                from: bla,
                to: 5,
                color: 'yellow'
            }],
        title: {
            text: 'Flats'
        }
        
    },

    series: [{
        data: [1, 3, 5, 2, 3, 9, 6, 7, 3, 5, 4, 3]
    }]
});

Where I get stuck is updating the chart in real time. I can see there are methods to do that if I want to update my data, but I’m not sure how to do that for plotBands.

Tags:

2

Answers


  1. 0

    We can use chart.update.
    First, we set your chart as chart.

    const chart = Highcharts.chart(/** **/);

    And, now we use chart.update in rangeOutput function.

    chart.update({
  yAxis: {
    plotBands: [
      {
        from: rangeInput.value,
        to: 5,
        color: "yellow",
      },
    ],
    title: {
      text: "Flats",
    },
  },
});

    Here is a CodePen of the final code.

    Login or Signup to reply.
  2. 0

    To update the plotBands dynamically when the slider values change, you need to modify your code to update the Highcharts chart’s yAxis options whenever the input range value changes. Here’s an example of how you can achieve this:

    HTML:

    <script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

<div id="slider">
    <input class="bar" type="range" id="range-input" min="1" max="25" value="1"/>
    <span class="highlight"></span>
    <output id="range-value">1</output>
</div>

    JavaScript:

    var rangeInput = document.getElementById("range-input");
var rangeValue = document.getElementById("range-value");
var chart;

rangeInput.oninput = rangeOutput;

function rangeOutput() {
    rangeValue.innerText = rangeInput.value;
  
    // Update plotBands on changing slider value
    chart.yAxis[0].update({
        plotBands: [{
            from: parseInt(rangeInput.value),
            to: 5,
            color: 'yellow'
        }]
    });
}

chart = Highcharts.chart('container', {
    chart: {
        marginTop: 5
    },
    title: {
        text: 'Flats sold per month'
    },
  
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
  
    yAxis: {
        title: {
            text: 'Flats'
        },
        plotBands: [{
            from: parseInt(rangeInput.value),
            to: 5,
            color: 'yellow'
        }]
    },
  
    series: [{
        data: [1, 3, 5, 2, 3, 9, 6, 7, 3, 5, 4, 3]
    }]
});

    In this code, we store the reference to the Highcharts chart in the chart variable. On changing the slider value, the rangeOutput function is called, which updates the range value displayed and updates the plotBands on the chart’s yAxis by using the chart.yAxis[0].update() method.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search