Two charts using same options, but I need different titles for the charts

Question

Using Chart.js I declare two charts, using the same options. I would like to have different titles for the charts. But titles are declared in options.

I tried, adding title: after the opt that are used for both charts. But this did not work.

var ctx = document.getElementById("myChart");
myLineChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: chartData,
    options: opt,
    title: {
        display: true,
        text: 'title',
    }
});

var ctx2 = document.getElementById("myChart2");
myLineChart = new Chart(ctx2, {
    type: 'horizontalBar',
    data: chartData2,
    options: opt,
    title: {
        display: true,
        text: 'title2',
    }
});

And the var options are:

var opt = {
    events: false,
    legend: {
        display: false
    },
    scales: {
        xAxes: [{
            ticks: {
                display: true,
                callback: function(value, index, values) {
                    return Intl.NumberFormat('$form->{countrycode}').format((value));
                }
            }
        }]
    },
    responsive: false,
    tooltips: {
        enabled: false
    },
    hover: {
        animationDuration: 0
    },
    animation: {
        duration: 1,
        onComplete: function() {
            var chartInstance = this.chart;
            ctx = chartInstance.ctx;
            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';

            this.data.datasets.forEach(function(dataset, i) {
                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function(bar, index) {
                    var data = '$form->{currency}' + Intl.NumberFormat('$form->{countrycode}').format(dataset.data[index]);
                    ctx.fillText(data, bar._model.x + 10, bar._model.y - 1);
                });
            });
        }
    }
};

score 0 · Answer 1 · answered Sep 04 '19 at 10:56

The important step is to do a deep copy of the options object.

Write down the options you want to use for both charts. You don't need title: { ... } here because you will override it later.

let optionsDefault = {
  responsive: true,
  scales: { ... }
  // ...
}

Deep copy the options for both charts (JSON.parse & stringify is just one method for deep cloning, look here for more information about deep cloning).

let options1 = JSON.parse(JSON.stringify(optionsDefault))
options1.title = {
  display: true,
  text: "Chart 1"
}
let options2 = JSON.parse(JSON.stringify(optionsDefault))
options2.title = {
  display: true,
  text: "Chart 2"
}

Assign both options to the charts.

let chart1 = new Chart(ctx1, {
  type: "line",
  data: data,
  options: options1
});
let chart2 = new Chart(ctx2, {
  type: "line",
  data: data,
  options: options2
});

Thank You!, that did the trick! Although my formatting of the values, defined in optionsDefault, do not work anymore. — Matthijs Havinga, Sep 05 '19 at 10:48
Hmh, can you explain what you changed or even have a [jsbin](https://jsbin.com/?html,js,output)? Another option would be to use the default options for chart1, clone them and use the altered version with the new title for chart2. You only need one cloning for this and the code is shorter but the code readability decreases with this method. But you can spot if there are differences in the formatting of chart1 and chart2 with this way. — HeadhunterKev, Sep 06 '19 at 07:37

Two charts using same options, but I need different titles for the charts

1 Answers1