Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chart.js - mixing bar and line graphs - can I get the lines to fill the full column?

I am using Chart.js v2.5.0 to create a chart like this:

enter image description here

Note that sometimes the bar will go over the red dotted line. Sometimes the red dotted line will be at a different position (its normally at 25, but will be at other levels on some months).

My issue is that I want the red dotted lines to extend to the full width of the column. As you can see on the first column the red dotted line only goes halfway into the column. I have the same issue at the other end of the chart, the red dotted line only goes halfway into the column.

My current implementation here is to have a mixed chart, one is a bar chart and another is a line chart - with data like so:

    data = {
        labels: ['Jan 21st', 'Feb 21st', 'Mar 21st', 'Apr 21st']
        datasets: [
            {
                type: 'bar',
                label: 'A',
                data: [10, 25, 18, 37],
            },
            {
                type: 'line',
                label: 'B',
                data: [25, 25, 25, 25],
                fill: false,
                borderWidth: 1,
                borderColor: '#f00',
                borderDash: [5,4],
                lineTension: 0,
                steppedLine: true
            }
        ]
    }

Does Chart.js have an option or method for making the red dotted lines extend to the full column width?

I have had another idea, but I am not sure if this is possible: Can I use a bar graph for the red dotted line, and only show the top line of the bar graph?

like image 295
Jimmery Avatar asked Mar 24 '17 16:03

Jimmery


People also ask

How do I make a chart with both lines and bars?

Create a combo chart with a secondary axisClick anywhere in the chart you want to change to a combo chart to show the CHART TOOLS. Click DESIGN > Change Chart Type. On the All Charts tab, choose Combo, and then pick the Clustered Column - Line on Secondary Axis chart.

How do you add line data to a bar chart?

In the chart, select the data series that you want to add a line to, and then click the Chart Design tab. For example, in a line chart, click one of the lines in the chart, and all the data marker of that data series become selected. Click Add Chart Element, and then click Gridlines.

How do you superimpose a line graph on a bar chart?

Select the specified bar you need to display as a line in the chart, and then click Design > Change Chart Type. See screenshot: 3. In the Change Chart Type dialog box, please select Clustered Column – Line in the Combo section under All Charts tab, and then click the OK button.


1 Answers

Unfortunately, there isn't a way to "configure" the chart to achieve what you want. It all has to do with how the line chart scale drawing works. With that said, you can still achieve this behavior by tricking chart.js using some "dummy" data.

Basically, you create a "dummy" first and last label. Then add a corresponding "dummy" first and last value to your bar data array (this data will never be displayed). Then add a corresponding "dummy" first and last value to your line data array, but make sure you set the value the same as the next/prev value to end up with a straight line (otherwise your line will angle at the beginning and end). Here is what I mean.

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['dummy1', 'Jan 21st', 'Feb 21st', 'Mar 21st', 'Apr 21st', 'dummy2'],
    datasets: [
      {
        type: 'bar',
        label: 'A',
        // the 1st and last value are placeholders and never get displayed on the chart
        data: [0, 10, 25, 18, 37, 0],
      },
      {
        type: 'line', 
        label: 'B',
        // the 1st and last value are placeholders and never get displayed on the chart
        // to get a straight line, the 1st and last values must match the same value as
        // the next/prev respectively
        data: [25, 25, 25, 25, 25, 25],
        fill: false,
        borderWidth: 1,
        borderColor: '#f00',
        borderDash: [5,4],
        lineTension: 0,
        steppedLine: true
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],  
      xAxes: [{
        // exclude the 1st and last label placeholders by specifying the min/mix ticks
        ticks: {
          min: 'Jan 21st',
          max: 'Apr 21st',
        }
      }],
    }
  }
});

Checkout this codepen example to see it in action.

like image 187
jordanwillis Avatar answered Oct 13 '22 01:10

jordanwillis