Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

line graph spot in the top middle of the bar graph

I have created a combo dual bar graph using chartjs. My code is given below. The bar combo dual graph is working fine but I had got a requirement to put a line for the green color bar graph which connects all its top mid points. I have somewhat drew a line graph connecting the green graph but the problem which I am facing is that the line graph spot point is not in the top middle of the green bar graph like as shown below.

Can anyone please tell me how to make the line spot in the top middle of the bar graph

![enter image description here

Working Demo

html

<canvas id="canvas"></canvas>

js

var barChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            type: 'bar',
              label: "Visitor",
                data: [10, 59, 340, 521, 450, 200, 195],
                fill: false,
                backgroundColor: "rgba(220,220,220,0.5)",
                borderColor: '#71B37C',
                hoverBackgroundColor: '#71B37C',
                hoverBorderColor: '#71B37C'

        }, {
            type: 'bar',
              label: "Visitor",
                data: [200, 185, 590, 621, 250, 400, 95],
                fill: false,
                backgroundColor: '#71B37C',
                borderColor: '#71B37C',
                hoverBackgroundColor: '#71B37C',
                hoverBorderColor: '#71B37C'

        }, {

                type:'line',
                data: [200, 185, 590, 621, 250, 400, 95],
                fill: false,
                borderColor: '#EC932F',
                backgroundColor: '#EC932F',
                pointBorderColor: '#EC932F',
                pointBackgroundColor: '#EC932F',
                pointHoverBackgroundColor: '#EC932F',
                pointHoverBorderColor: '#EC932F'

        } ]
    };

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
            responsive: true,
            tooltips: {
              mode: 'label'
          },
          elements: {
            line: {
                fill: false
            }
        },
          scales: {
            xAxes: [{
                display: true,
                gridLines: {
                    display: false
                },
                labels: {
                    show: true,
                }
            }],
            yAxes: [{
                type: "linear",
                display: true,
                position: "left",
                id: "y-axis-1",
                gridLines:{
                    display: false
                },
                labels: {
                    show:true,

                }
            }, {
                type: "linear",
                display: true,
                position: "right",
                id: "y-axis-2",
                gridLines:{
                    display: false
                },
                labels: {
                    show:true,

                }
            }]
        }
        }
        });
    };
like image 818
Alex Man Avatar asked Jul 15 '16 06:07

Alex Man


People also ask

What is the line on top of a bar graph?

The vertical axis on the left or right side of the bar graph is called the y-axis. The horizontal axis at the bottom of a bar graph is called the x-axis. The height or length of the bars represents the value of the data. The value corresponds to levels on the y-axis.

What are the parts of a bar graph called?

Bar graphs have an x-axis and a y-axis. In most bar graphs, like the one above, the x-axis runs horizontally (flat). Sometimes bar graphs are made so that the bars are sidewise like in the graph below. Then the x-axis has numbers representing different time periods or names of things being compared.

What do we put at the top of a graph?

Graph Title: The title appears at the top of the graph and should describe the graph. Axis Labels: The labels that appear along the x and y-axes describing what is being measured.

How do I add a line to the top of a bar graph in Excel?

Add predefined lines or bars to a chart On the Layout tab, in the Analysis group, do one of the following: Click Lines, and then click the line type that you want. Note: Different line types are available for different chart types. Click Up/Down Bars, and then click Up/Down Bars.


1 Answers

To change the display of a specific chart, you have to edit the config of your whole graph.

Deep inside, you will find the attributes you need to change for your specific chart (in your case, the line chart).


If you try to search deep in it, you will finally find x & yattributes for your line chart, stored in myBar.config.data.datasets[2].metaData[i]._model (which was hard to find, I admit).

Then, you just need to add this to your code (after the generation of your myBar) :

// For each value of your line chart ...
for (var i = 0; i < myBar.config.data.datasets[2].metaData.length; i++) {
    // Get the bar width associated to this value  
    var barWidth = myBar.config.data.datasets[1].metaData[i]._model.width;
    // Get the percentage that the bar is taking in the graph
    var barPercentage = myBar.config.options.scales.xAxes[0].barPercentage;

    // Add the width of the bar / (2*percentage) -- which is the half of the bar
    myBar.config.data.datasets[2].metaData[i]._model.x += barWidth / (2*barPercentage);
    // Also edit the controlPointNext and controlPointPrevious to change the bezier curve display
    myBar.config.data.datasets[2].metaData[i]._model.controlPointNextX += barWidth / (2*barPercentage);
    myBar.config.data.datasets[2].metaData[i]._model.controlPointPreviousX += barWidth / (2*barPercentage);
}

Check the plunker for the full code.


And here is the final result : enter image description here

Update - Responsiveness added :

To make the graph responsive, you will need to achieve the loop inside Chart.js plugins.

Plugins let you handle all the events that are triggered while creating, updating, rendering your graph.

We will especially edit the afterUpdate event, which is triggered every time there is an update (a resize for instance).

Chart.pluginService.register({
    afterUpdate: function(chart) {
        // Loop in here
    }
});

Here is another fiddle with the final result, which is responsive.

Note that the bar graph is drawn after the line one (I don't know why) so I had to lower the alpha of the bar background color.

like image 192
tektiv Avatar answered Sep 25 '22 11:09

tektiv