# 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.

``````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.

``````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.

## Drawing order

By default, datasets are drawn so that first one is top-most. This can be altered by specifying `order` option to datasets. `order` defaults to `0`.

``````var mixedChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: 'Bar Dataset',
data: [10, 20, 30, 40],
// this dataset is drawn below
order: 1
}, {
label: 'Line Dataset',
data: [10, 10, 10, 10],
type: 'line',
// this dataset is drawn on top
order: 2
}],
labels: ['January', 'February', 'March', 'April']
},
options: options
});
``````
{"ft_lang_label":"__label__en","ft_lang_prob":0.7815715,"math_prob":0.84470093,"size":1580,"snap":"2019-51-2020-05","text_gpt3_token_len":420,"char_repetition_ratio":0.14784265,"word_repetition_ratio":0.23214285,"special_character_ratio":0.30822784,"punctuation_ratio":0.23919308,"nsfw_num_words":0,"has_unicode_error":false,"math_prob_llama3":0.95009077,"pos_list":[0],"im_url_duplicate_count":[null],"WARC_HEADER":"{\"WARC-Type\":\"response\",\"WARC-Date\":\"2019-12-10T04:55:36Z\",\"WARC-Record-ID\":\"<urn:uuid:86ad1cc1-e45e-4b39-9578-4cebdf38a9b9>\",\"Content-Length\":\"30515\",\"Content-Type\":\"application/http; msgtype=response\",\"WARC-Warcinfo-ID\":\"<urn:uuid:b135aa78-c113-4242-bd1c-2eb1e55b9053>\",\"WARC-Concurrent-To\":\"<urn:uuid:3d634a4e-4030-4fe4-a689-de231a477622>\",\"WARC-IP-Address\":\"104.17.33.53\",\"WARC-Target-URI\":\"https://www.chartjs.org/docs/latest/charts/mixed.html\",\"WARC-Payload-Digest\":\"sha1:COSBMA727ITPEXE2WCRUOVUOOPNFHSA5\",\"WARC-Block-Digest\":\"sha1:R4FEGRI67T4IHD5PUUY6ANWHQIHF7CGO\",\"WARC-Identified-Payload-Type\":\"text/html\",\"warc_filename\":\"/cc_download/warc_2019/CC-MAIN-2019-51/CC-MAIN-2019-51_segments_1575540525821.56_warc_CC-MAIN-20191210041836-20191210065836-00395.warc.gz\"}"}