CODEWITHSUNDEEP
javascriptchartschart.js
user1076813
user1076813

Reputation: 487

How do I make line charts overlay over bar charts in chartjs

I'm using leighquince fork of chartjs in v1.01-beta.5 because I can overlay two charts.

When I try to overlay a line chart and a bar chart, the line chart is under the bar chart

Bar overlays Line

I can't seem to find an option that makes the Line chart be over the bar chart but overlayBars:true

How can this be achieved, will I edit the source?

Upvotes: 3

Views: 10963

Answers (3)

Ismael Hompanera
Ismael Hompanera

Reputation: 61

You have to declare the line chart first in the dataSet and then the bar chart:

datasets: [
        {
          type: 'line',
          yAxisID: 'y-axis-1',
          fill: false,
          pointRadius: 0,
          label: 'Nota media',
          backgroundColor: '#ed7d31',
          borderColor: '#ed7d31',
          data: [60, 59, 80, 81]
        },
        {
          type: 'bar',
          yAxisID: 'y-axis-0',
          label: 'Observaciones',
          backgroundColor: '#5b9bd5',
          data: [40, 20, 12, 39]
        }
      ],

Upvotes: 6

potatopeelings
potatopeelings

Reputation: 41065

This will be solved if you use the current master (instead of the one tagged v1.01-beta.5) - you don't need to set any options.

Fiddle - http://fiddle.jshell.net/n7jgo7oh/

enter image description here

Upvotes: 5

Sabba
Sabba

Reputation: 257

If in your source you are defining and drawing line before bar try to invert definition and drawing: bar first then line

Upvotes: 0

Related Questions