[Chartjs]-How to change the chart line or area colors according to the user need?

by

2👍

I have found the code in javascript to accomplish this task

{% extends 'base.html' %}
{% block content %}
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <input type="color" id ="colorPicker"/>
</body>
  <script>
    var ctx = document.getElementById("myChart").getContext('2d');
     var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [{% for item in labels %}
                  "{{item}}",
              {% endfor %}],
        datasets: [{
            label: '# of Votes',
            data: [{% for item in values %}
                      {{item}},
                    {% endfor %}],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

    var colorPicker = document.getElementById("colorPicker");
    colorPicker.addEventListener("change", updateChart, false);

    function updateChart(e) {
      e.preventDefault();

      myChart.data.datasets[0].backgroundColor[0] = e.target.value;
      myChart.data.datasets[0].backgroundColor[1] = e.target.value;
      myChart.data.datasets[0].backgroundColor[2] = e.target.value;
      myChart.data.datasets[0].backgroundColor[3] = e.target.value;
      myChart.data.datasets[0].backgroundColor[4] = e.target.value;
      myChart.data.datasets[0].backgroundColor[5] = e.target.value;
      myChart.data.datasets[0].backgroundColor[6] = e.target.value;
      myChart.data.datasets[0].backgroundColor[7] = e.target.value;
      myChart.update();
    }

  </script>
{% endblock %}

1👍

By Using This Code We can change the colour of each bar of the graph

{% extends 'base.html' %}
{% block content %}
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <input type="color" id ="colorPicker" hidden/>
</body>
  <script>
      var color = '#456212';
      var lastIndex = null;
    var canvas = document.getElementById("myChart");
     var myChart = new Chart(canvas.getContext('2d'), {
    type: 'bar',
    data: {
        labels: [{% for item in labels %}
                  "{{item}}",
              {% endfor %}],
        datasets: [{
            label: '# of Votes',
            data: [{% for item in values %}
                      {{item}},
                    {% endfor %}],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

     canvas.addEventListener("click", ChangeColor, false);

     colorPicker = document.getElementById('colorPicker');

     colorPicker.addEventListener("change", getColor, false);


    function getColor(e){

       //
        console.log(this.lastIndex)
        myChart.data.datasets[0].backgroundColor[lastIndex] =  e.target.value;
        console.log(e.target.value);
        myChart.update();

    }


 function ChangeColor(e){
        e.preventDefault();
        var activePoints = myChart.getElementsAtEvent(e);
        lastIndex = activePoints[0]._index;
        this.color = myChart.data.datasets[0].backgroundColor[lastIndex];
        console.log('Before', this.color);
        var colorPicker = document.getElementById('colorPicker').click();
        //console.log('After',this.color);
    }



  </script>
{% endblock %}

Leave a comment