Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Gary Stewart
Gary Stewart
14,142 Points

Chart.js questions

Hi I am currently using the chart.js script within one of my wordpress projects and was wondering two things.

Firstly I have this label for it, and was wondering if there was a way to set it so that if there is only one vote the label is 'vote' and not 'votes' and anything with more than one count had the label 'votes'?

tooltipTemplate: "<%if (label){%><%=label%> <%}%>(<%= value %> bids)",

Secondly I was wondering if there was a way to set a specific bar to one colour? At the moment I have them all the same colour using:

fillColor   : "rgba(52,104,175,0.7)",

but wondered if I could set a bar matching a certain value to be a unique colour?

Thanks! Gary

wuworkshop
wuworkshop
3,429 Points

Could you share example code somehow with something like JS Bin or Plunker? Judging from the Chart.js documentation, it looks like it should be possible to assign a different fillColor for each bar.

Gary Stewart
Gary Stewart
14,142 Points 
<script>var ChartTitleOps = {

    showTooltips: true,
    tooltipFillColor: "#e64c65",
    tooltipFontFamily: "'Bree Serif', sans-serif",
    tooltipFontColor: "#fff",
    tooltipTemplate: "<%if (label){%><%=label%> <%}%>(<%= value %> votes)",
    barValueSpacing : 2,
    scaleLineWidth: 10,

        scaleFontFamily: "'Bree Serif', sans-serif",responsive: false,animation: false,maintainAspectRatio: false,scaleIntegersOnly: true,scaleShowGridLines : false,scaleBeginAtZero : true,scaleFontSize: 17,scaleFontColor: "#FFFFFF",scaleOverride:true,scaleSteps:<?php echo $highestVoteCount ?>,scaleStepWidth:1,scaleStartValue:0,scaleGridLineColor : "#1f253d"}; var ChartTitleData = {labels : [<?php getGraphValueLabels($votes); ?>],datasets : [{
                    fillColor   : "rgba(52,104,175,0.7)",
                    strokeColor : "rgba(52,104,175,1)",
                    data        : [<?php getGraphValues($votes); ?>]
                }]};var wpChartChartTitleBar = new Chart(document.getElementById("ChartTitle").getContext("2d")).Bar(ChartTitleData,ChartTitleOps);
    </script>

1 Answer

Gary Stewart
Gary Stewart
14,142 Points
Gary Stewart
Gary Stewart
14,142 Points

Found this solution but am not sure how to implement it into my code?

http://stackoverflow.com/questions/25594478/different-color-for-each-bar-in-a-bar-chart-chartjs

Help much appreciated!