ChartJS: установить, какие данные отображать при загрузке диаграммы, и сохранить (запомнить)

Question

Я использую библиотеку http://www.chartjs.org/ для диаграмм, где я пытаюсь отобразить 6 различных точек данных на оси Y.

Когда все отображается одновременно, немного беспорядочно, но я не хочу разбивать его на несколько графиков, поскольку все эти данные коррелируют.

Интересно, можно ли указать, какие данные должны быть скрыты при загрузке диаграммы, и тогда я смогу показать остальные самостоятельно.

Также возможно ли как-то сохранить эти настройки? Допустим, я хочу отображать только 3 типа данных, и после перезагрузки страницы они запомнят мои предпочтения.

РЕДАКТИРОВАТЬ: Вот текущий код, если это помогает ..

<canvas id="statsByDayChart" width="400" height="300"></canvas>
    <script>
        var ctx = document.getElementById('statsByDayChart').getContext('2d');

        var profit = {
          label: "Profit",
          data: {!! json_encode($profit) !!},
          borderColor: 'rgba(73, 189, 138, 1)',
          borderWidth: 3,
          backgroundColor: 'rgba(219, 242, 232, 0)',
          pointBorderWidth: 4,
          pointBackgroundColor: '#128ffb',
          yAxisID: 'y-axis-profit',
          type: 'line'
        };

        var cost = {
          label: "Cost",
          data: {!! json_encode($cost) !!},
          borderColor: 'rgba(255, 0, 0, 1)',
          borderWidth: 2,
          backgroundColor: 'rgba(255, 0, 0, 0)',
          pointBorderWidth: 4,
          pointBackgroundColor: '#128ffb',
          yAxisID: 'y-axis-cost',
          type: 'line'
        };

        var ctr = {
          label: "CTR",
          data: {!! json_encode($ctr) !!},
          borderColor: 'rgba(255, 126, 0, 1)',
          borderWidth: 3,
          backgroundColor: 'rgba(255, 126, 0, 0)',
          pointBorderWidth: 4,
          pointBackgroundColor: '#128ffb',
          yAxisID: 'y-axis-ctr',
          type: 'line'
        };

        var holds = {
          label: "Holds",
          data: {!! json_encode($holds) !!},
          borderColor: 'rgb(175, 26, 245, 1)',
          backgroundColor: 'rgb(175, 26, 245, 1)',
          borderWidth: 4,
          pointBorderWidth: 4,
          pointBackgroundColor: '#128ffb',
          yAxisID: 'y-axis-holds',
          type: 'bar',
          fill: true
        };

        var conversions = {
          label: "Conversions",
          data: {!! json_encode($conversions) !!},
          borderColor: 'rgb(54, 162, 235, 1)',
          backgroundColor: 'rgb(54, 162, 235, 1)',
          borderWidth: 5,
          pointBorderWidth: 4,
          pointBackgroundColor: '#128ffb',
          yAxisID: 'y-axis-conversions',
          type: 'bar',
          fill: true
        };

        var impressions = {
          label: "Impressions",
          data: {!! json_encode($displays) !!},
          borderColor: 'rgba(254, 206, 96, 1)',
          backgroundColor: 'rgba(255, 231, 175, 0.8)',
          borderWidth: 6,
          pointBorderWidth: 4,
          borderDash: [20, 6],
          pointBackgroundColor: '#128ffb',
          yAxisID: 'y-axis-impressions',
          type: 'line',
          fill: true
        };

        var chartData = {
          labels: {!! json_encode($days) !!},
          datasets: [profit, cost, ctr, holds, conversions, impressions]
        };

        var lineChart = new Chart(ctx, {
          type: 'bar',
          data: chartData,
          options: {
            legend: {display: true},
            responsive: true,
            maintainAspectRatio: false,
            elements: { line: { tension: 0.05 } },
            scales: {
                xAxes: [{ gridLines: { display: true, offsetGridLines: false }, barPercentage: 1, categoryPercentage: 0.4 }],
                yAxes: [
                    {
                        id: 'y-axis-profit',
                        type: 'linear',
                        gridLines: { display: true },
                        ticks: { beginAtZero: true, min: {{ $profit->min() }}, max: {{ $profit->max() }} },
                        display: true
                    },
                    {
                        id: 'y-axis-cost',
                        type: 'linear',
                        gridLines: { display: false },
                        ticks: { beginAtZero: true, min: {{ $cost->min() }}, max: {{ $cost->max() }} },
                        display: false
                    },
                    {
                        id: 'y-axis-ctr',
                        type: 'linear',
                        gridLines: { display: false },
                        ticks: { beginAtZero: true, min: {{ $ctr->min() }}, max: {{ $ctr->max() }} },
                        display: false
                    },
                    {
                        id: 'y-axis-holds',
                        type: 'linear',
                        gridLines: { display: false },
                        ticks: { beginAtZero: true, min: {{ $holds->min() }}, max: {{ $holds->max() }} },
                        display: false,
                    },
                    {
                        id: 'y-axis-conversions',
                        type: 'linear',
                        gridLines: { display: false },
                        ticks: { beginAtZero: true, min: {{ $conversions->min() }}, max: {{ $conversions->max() }} },
                        display: false,
                    },
                    {
                        id: 'y-axis-impressions',
                        type: 'linear',
                        gridLines: { display: false },
                        ticks: { beginAtZero: true, min: {{ $displays->min() }}, max: {{ $displays->max() }} },
                        display: false
                    }
                ]
            },
            tooltips: { mode: 'index', intersect: false },
            hover: { mode: 'nearest', intersect: true },
          }
        });
    </script>