9B534B8686E580E0E01768F00155B461

at path：ROOT / sistema / vendors / chart.js / docs / charts / mixed.md

run：R W Run

README.md

387 By

2018-11-08 02:46:18

R W Run

area.md

2.46 KB

2018-11-08 02:46:18

R W Run

bar.md

9.01 KB

2018-11-08 02:46:18

R W Run

bubble.md

4 KB

2018-11-08 02:46:18

R W Run

doughnut.md

3.87 KB

2018-11-08 02:46:18

R W Run

line.md

9.41 KB

2018-11-08 02:46:18

R W Run

mixed.md

1.81 KB

2018-11-08 02:46:18

R W Run

polar.md

3.31 KB

2018-11-08 02:46:18

R W Run

radar.md

5.49 KB

2018-11-08 02:46:18

R W Run

scatter.md

1.13 KB

2018-11-08 02:46:18

R W Run

error_log

📄mixed.md

# Mixed Chart Types

With Chart.js, it is possible to create mixed charts that are a combination of two or more different chart types. A common example is a bar chart that also includes a line dataset.

Creating a mixed chart starts with the initialization of a basic chart.

```javascript
var myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});
```

At this point we have a standard bar chart. Now we need to convert one of the datasets to a line dataset.

```javascript
var mixedChart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
          label: 'Bar Dataset',
          data: [10, 20, 30, 40]
        }, {
          label: 'Line Dataset',
          data: [50, 50, 50, 50],

// Changes this dataset to become a line
          type: 'line'
        }],
    labels: ['January', 'February', 'March', 'April']
  },
  options: options
});
```

At this point we have a chart rendering how we'd like. It's important to note that the default options for a line chart are not merged in this case. Only the options for the default type are merged in. In this case, that means that the default options for a bar chart are merged because that is the type specified by the `type` field.

{% chartjs %}
{
  "type": "bar",
  "data": {
    "labels": [
      "January",
      "February",
      "March",
      "April"
    ],
    "datasets": [{
      "label": "Bar Dataset",
      "data": [10, 20, 30, 40],
      "borderColor": "rgb(255, 99, 132)",
      "backgroundColor": "rgba(255, 99, 132, 0.2)"
    }, {
      "label": "Line Dataset",
      "data": [50, 50, 50, 50],
      "type": "line",
      "fill": false,
      "borderColor": "rgb(54, 162, 235)"
    }]
  },
  "options": {
    "scales": {
      "yAxes": [{
        "ticks": {
          "beginAtZero": true
        }
      }]
    }
  }
}
{% endchartjs %}