Start Bar From A Particular Point In Y Axis Instead Of Zero In Plotly Bar Graph

language : javascript & chart framework : plotly I want my bar to start from a particular point on Y axis instead of 0 on Y axis. By default the bar always start from 0 on Y a

Solution 1:

Got it

I needed to use two more traces to hold the start and the end point of the bar. And then use a Marker color to ignore the bar from point 0 to my expected start point.

var offset = 19;
        var tick_str = ['19', '20', '21', '22', '23', '24', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18'];

        var trace1 = {
          x: ['JP', 'CN', 'TW', 'AU', 'HK', 'MY', 'PH', 'SG', 'SP', 'BN', 'LK', 'MO', 'TH', 'VB', 'VN', 'ID', 'BD', 'IN', 'NP', 'PK', 'AE', 'AO', 'DF', 'IQ', 'MU', 'BH', 'OM', 'ZA', 'ZM', 'KE', 'ZW', 'BW', 'TZ', 'UG', 'JO', 'QA', 'GB', 'CI', 'CM', 'GH', 'GM', 'NG', 'SL', 'US', 'BR'],
          y: [],
          text: ['19.00', '20.30', '20.30', '21.00', '21.00', '21.00', '21.00', '21.00', '21.00', '22.00', '22.00', '22.00', '22.00', '22.00', '22.00', '22.15', '22.30', '22.30', '22.30', '23.00', '23.30', '23.30', '23.30', '23.30', '23.30', '24.00', '24.00', '24.30', '24.30', '24.35', '24.35', '24.40', '24.45', '24.50', '01.00', '01.00', '03.30', '04.30', '04.30', '04.30', '04.30', '04.30', '04.30', '05.30', '07.30'],
          mode: 'lines+markers',
          hoverinfo: 'text',
          marker: {
            color: 'rgb(128, 0, 128)',
            size: 8
          },
          line: {
            color: 'rgb(128, 0, 128)',
            width: 1
          }
        };

        var trace2 = {
          x: ['JP', 'CN', 'TW', 'AU', 'HK', 'MY', 'PH', 'SG', 'SP', 'BN', 'LK', 'MO', 'TH', 'VB', 'VN', 'ID', 'BD', 'IN', 'NP', 'PK', 'AE', 'AO', 'DF', 'IQ', 'MU', 'BH', 'OM', 'ZA', 'ZM', 'KE', 'ZW', 'BW', 'TZ', 'UG', 'JO', 'QA', 'GB', 'CI', 'CM', 'GH', 'GM', 'NG', 'SL', 'US', 'BR'],
          y: [],
          text: ['22.03', '1.13', '1.24', '24.47', '3.29', '4.57', '23.24', '2.17', '1.06', '24.39', '3.01', '24.53', '3.10', '24.49', '24.59', '1.16', '2.29', '3.03', '1.27', '1.23', '3.07', '7.18', '2.54', '2.33', '3.22', '3.03', '1.48', '5.40', '5.40', '5.40', '6.07', '5.40', '5.40', '5.40', '6.46', '2.27', '6.46', '6.19', '6.19', '8.31', '8.56', '6.50', '6.19', '13.59', '9.23'],
          mode: 'lines+markers',
          hoverinfo: 'text',
          marker: {
            color: 'rgb(0, 255, 0)',
            size: 6
          },
          line: {
            color: 'rgb(0, 255, 0)',
            width: 1
          }
        };

        var xData = ['JP', 'CN', 'TW', 'AU', 'HK', 'MY', 'PH', 'SG', 'SP', 'BN', 'LK', 'MO', 'TH', 'VB', 'VN', 'ID', 'BD', 'IN', 'NP', 'PK', 'AE', 'AO', 'DF', 'IQ', 'MU', 'BH', 'OM', 'ZA', 'ZM', 'KE', 'ZW', 'BW', 'TZ', 'UG', 'JO', 'QA', 'GB', 'CI', 'CM', 'GH', 'GM', 'NG', 'SL', 'US', 'BR'];

        var trace3 = {

         x: xData,
         y: [],
         text : ['19.00', '20.30', '20.30', '21.00', '21.00', '21.00', '21.00', '21.00', '21.00', '22.00', '22.00', '22.00', '22.00', '22.00', '22.00', '22.15', '22.30', '22.30', '22.30', '23.00', '23.30', '23.30', '23.30', '23.30', '23.30', '24.00', '24.00', '24.30', '24.30', '24.35', '24.35', '24.40', '24.45', '24.50', '01.00', '01.00', '03.30', '04.30', '04.30', '04.30', '04.30', '04.30', '04.30', '05.30', '07.30'],
         marker: {
                color: 'rgba(1,1,1,0.0)'
         },
         type : 'bar',
         hoverinfo: 'text'

        };

        var trace4 = {

                 x: xData,
                 y: [],
                 text : ['3.03','4.83', '4.94', '3.47', '6.29', '7.57', '2.24', '5.17', '4.06', '2.39', '5.01', '2.53', '5.1',  '2.49', '2.59', '3.01', '3.99', '4.73', '2.97', '2.23', '3.77', '7.88', '3.24', '3.03', '3.92', '3.03', '1.48', '5.1',  '5.1',  '5.05', '5.72', '5',    '4.95', '4.9',  '5.46', '1.27', '3.16', '1.89', '1.89', '4.01', '4.26', '2.2',  '1.89', '8.29', '1.93',],
                 marker: {
                        color: 'rgba(55,128,191,0.7)',
                        line: {
                          color: 'rgba(55,128,191,1.0)',
                          width: 2
                        }
                },
                 type : 'bar'

        };

        var i = 0;
        for (i = 0; i < trace1.text.length; i += 1) {
          trace1.y.push((parseFloat(trace1.text[i]) - offset + 24) % 24);
        }
        for (i = 0; i < trace2.text.length; i += 1) {
          trace2.y.push((parseFloat(trace2.text[i]) - offset + 24) % 24);
        }

        for (i = 0; i < trace3.text.length; i += 1) {
          trace3.y.push((parseFloat(trace3.text[i]) - offset + 24) % 24);
        }

        for (i = 0; i < trace4.text.length; i += 1) {
            trace4.y.push((parseFloat(trace4.text[i])));
            }

        var ticks = []
        for (i = 0; i < tick_str.length; i += 1) {
          ticks.push((parseInt(tick_str[i]) - offset + 24) % 24);
        }
        var layout = {
          autosize: false,
          width: 2000,
          height: 700,
          barmode: 'stack',
          showlegend: false,
          title: 'Magellan Batch DashBoard',
          font: {
            family: 'Raleway, snas-serif'
          },
          showlegend: false,
          xaxis: {
            title: 'Countries',
            tickangle: -45,
          },
          yaxis: {
            autotick: false,
            ticks: 'outside',
            tick0: 19,
            dtick: 1,
            ticklen: 8,
            tickwidth: 4,
            tickvals: ticks,
            ticktext: tick_str,
            tickmode: 'array',
            title: 'Time of execution for each country',
            zeroline: false,
            range: [-0.5, 23.5]
          },
          bargap: 0.75
        };
        var data = [trace1, trace2, trace3, trace4];
        Plotly.newPlot('myDiv', data, layout);