I am able to format the tooltips when I hover over a datapoint on a line chart via `options.scales.xAxes.time.tooltipFormat`, but I can&#39;t seem to do it for the x-axis tick lables. My `data.labels` is an array of moment objects. They display as `&quot;MMM DD, YYYY&quot;` (e.g. Feb 23, 2012), but I want to drop the year.

How to format x-axis time scale values in Chart.js v2

I have worked with chart.js 1.0 and had my doughnut chart tooltips displaying percentages based on data divided by dataset, but I&#39;m unable to replicate this with chart 2.0.

I have searched high and low and have not found a working solution. I know that it will go under options but everything I&#39;ve tried has made the pie dysfunctional at best.

    &lt;html&gt;
    
    &lt;head&gt;
        &lt;title&gt;Doughnut Chart&lt;/title&gt;
        &lt;script src=&quot;../dist/Chart.bundle.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;style&gt;
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
        &lt;/style&gt;
    &lt;/head&gt;
    
    &lt;body&gt;
        &lt;div id=&quot;canvas-holder&quot; style=&quot;width:75%&quot;&gt;
            &lt;canvas id=&quot;chart-area&quot; /&gt;
        &lt;/div&gt;
        &lt;script&gt;
        var randomScalingFactor = function() {
            return Math.round(Math.random() * 100);
        };
        var randomColorFactor = function() {
            return Math.round(Math.random() * 255);
        };
        var randomColor = function(opacity) {
            return &#39;rgba(&#39; + randomColorFactor() + &#39;,&#39; + randomColorFactor() + &#39;,&#39; + randomColorFactor() + &#39;,&#39; + (opacity || &#39;.3&#39;) + &#39;)&#39;;
        };
    
        var config = {
            type: &#39;doughnut&#39;,
            data: {
                datasets: [{
                    data: [
                        486.5,
    					501.5,
    					139.3,
    					162,
    					263.7,
                    ],
                    backgroundColor: [
                        &quot;#F7464A&quot;,
                        &quot;#46BFBD&quot;,
                        &quot;#FDB45C&quot;,
                        &quot;#949FB1&quot;,
                        &quot;#4D5360&quot;,
                    ],
                    label: &#39;Expenditures&#39;
                }],
                labels: [
                    &quot;Hospitals: $486.5 billion&quot;,
                    &quot;Physicians &amp; Professional Services: $501.5 billion&quot;,
                    &quot;Long Term Care: $139.3 billion&quot;,
                    &quot;Prescription Drugs: $162 billion&quot;,
                    &quot;Other Expenditures: $263.7 billion&quot;
                ]
            },
            options: {
                responsive: true,
                legend: {
                    position: &#39;bottom&#39;,
                },
                title: {
                    display: false,
                    text: &#39;Chart.js Doughnut Chart&#39;
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                }
    
            }
        };
    
        window.onload = function() {
            var ctx = document.getElementById(&quot;chart-area&quot;).getContext(&quot;2d&quot;);
            window.myDoughnut = new Chart(ctx, config);{
    			
    		}
        };
    
       
        &lt;/script&gt;
    &lt;/body&gt;
    
    &lt;/html&gt;



Chart.js 2.0 doughnut tooltip percentages

I never got into node so I am pretty sure I am doing something massively wrong here since I cannot find any info at all by googling. 

I have a django site and I wanted a JS charting library, I chose chart.js. 

I installed and like the docs, but after that I am unsure of what to do so I tried to fill in the blanks and follow their guide as much as possible. Here is what my html looks like....

    &lt;script src=&quot;/public/node_modules/chart.js/dist/Chart.js&quot;&gt;&lt;/script&gt;
    
    &lt;canvas id=&quot;myChart&quot; width=&quot;400&quot; height=&quot;400&quot;&gt;&lt;/canvas&gt;
    
    &lt;script&gt;    
        var ctx = document.getElementById(&quot;myChart&quot;);
        console.log(ctx);
        
        var options = {}
    
        var data = {
            labels: [&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;],
            datasets: [
                {
                    label: &quot;My First dataset&quot;,
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: &quot;rgba(75,192,192,0.4)&quot;,
                    borderColor: &quot;rgba(75,192,192,1)&quot;,
                    borderCapStyle: &#39;butt&#39;,
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: &#39;miter&#39;,
                    pointBorderColor: &quot;rgba(75,192,192,1)&quot;,
                    pointBackgroundColor: &quot;#fff&quot;,
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: &quot;rgba(75,192,192,1)&quot;,
                    pointHoverBorderColor: &quot;rgba(220,220,220,1)&quot;,
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: [65, 59, 80, 81, 56, 55, 40],
                    spanGaps: false,
                }
            ]
        };
    
        var myChart = new Chart({
            type: &#39;line&#39;,
            data: data,
            options: options
        })
    &lt;/script&gt;

I am just trying to get an example working. I put the node_modules directory that was downloaded via npm somewhere where my server would serve them up....and verified they are being served, but then I get this error when I try to build a chart. I took all the chart codes from their docs so I am pretty sure that part is right, but I can&#39;t see why I am getting this error.

chart.js Failed to create chart: can&#39;t acquire context from the given item

I am using bubble chart and gotta hide the y axis line. I&#39;ve tried the following but it doesn&#39;t work.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    yAxes: [{
      angleLines: {
        display: false
      }
    }]

&lt;!-- end snippet --&gt;



How to hide y axis line in ChartJs?

i would like to ask is that possible using Chart.js http://www.chartjs.org/ to get Combined Bar and line charts?

Thanks for any advice. 



Chart.js how to get Combined Bar and line charts?

How to vary the thickness of doughnut chart,  using &lt;a href=&quot;http://chartjs.org&quot;&gt;ChartJs&lt;/a&gt;

How to vary the thickness of doughnut chart, using ChartJs.?

I have a bar chart that&#39;s created using chart.js. Everything works fine on page load, but when I change the time frame using a daterangepicker, a glitch appears. The new data is brought in, but when I hover over it, the old data is shown. I&#39;m new to javascript so I&#39;m hoping to get some help. It looks like I need to incorporate .destroy(); somehow, but I don&#39;t know how. A snippet of my code is below:

    function loadFTPRChart(startdate, enddate){
    var BCData = {
    labels: [],
    datasets: [
     {
      label: &quot;Pass %&quot;,
      backgroundColor: &quot;#536A7F&quot;,
      data: [],
      stack: 1
    },
    {
      label: &quot;Fail %&quot;,
      backgroundColor: &quot;#e6e6e6&quot;,
      data: [],
      stack: 1
    },
    {
      label: &quot;Auto %&quot;,
      backgroundColor: &quot;#286090&quot;,
      data: [],
      stack: 2
    },
    {
      label: &quot;Manual %&quot;,
      backgroundColor: &quot;#f0f0f0&quot;,
      data: [],
      stack: 2
    }
     ]
    };
      $.getJSON( &quot;content/FTPR_AM_Graph_ajax.php&quot;, {
        startdate: startdate,
        enddate: enddate,
        location: &quot;M&quot;
    })
    .done(function( data ) {
        console.log(&quot;data&quot;, data);
        $.each( data.aaData, function( key, val ) {
          if(val == &quot;&quot;){return true}
          BCData.labels.push(&quot;Coater &quot; + val[0]);
          BCData.datasets[0].data.push(parseFloat(val[2]));
          BCData.datasets[1].data.push(parseFloat(100-val[2]));
          BCData.datasets[2].data.push(parseFloat(val[1]));
          BCData.datasets[3].data.push(parseFloat(100-val[1]));
        });
  
        var option = {   
         responsive:true,
    };
    console.log(&quot;BCData&quot;, BCData);
  
   
    //console.log(&quot;PrevData&quot;, data);
    var ctx = document.getElementById(&quot;mybarChart2&quot;).getContext(&quot;2d&quot;);
    new Chart(ctx, {
      type: &#39;groupableBar&#39;,
      data: BCData,
      options: {
        scales: {
          yAxes: [{
            ticks: {
              max: 100,
            },
            stacked: true,
          }]
        }
      }
    });
    });
  
    }
  
  
    loadFTPRChart($(&#39;#reportrange&#39;).data().daterangepicker.startDate.format(&#39;MM/DD/YYYY&#39;), $(&#39;#reportrange&#39;).data().daterangepicker.endDate.format(&#39;MM/DD/YYYY&#39;));



What is the best way to destroy the original data so that when I change the date range and hover over the new chart, the old data no longer flickers?

Thanks

Chartjs Bar Chart showing old data when hovering

I need to hide labels in line chart drawn using library [chart.js][1]. I googled but no luck. Could that be hidden?  

Thanks


  [1]: http://www.chartjs.org/

Hiding labels on y axis in Chart.js

In Chart.js V1.0, I would add `tooltipTemplate: &quot;&lt;%if (label){%&gt;&lt;%=label %&gt;: &lt;%}%&gt;&lt;%= &#39;€&#39; + value %&gt;&quot;` to add a euro symbol as prefix to the tooltip label. However, this no longer works in V2. Does anybody know the new way to do accomplish this? I can&#39;t seem to find it.

Many thanks!



Chart.js V2: Add prefix or suffix to tooltip label

I recently updated my charts.js library to the most updated version (2.5.0).
This version doesn&#39;t show the labels on the chart.

I have an example of working one on fiddler: http://jsfiddle.net/g6fajwg8 .

However, I defined my chart exactly as in the example but still can not see the labels on the chart.

Note: There are a lot of questions like this on Google and Stackoverflow but most of them are about previous versions which is working well on them.

    var config = {
        type: &#39;pie&#39;,
        data: {
            datasets: [{
                data: [
                  1200,
                  1112,
                  533,
                  202,
                  105,
                ],
                backgroundColor: [
                  &quot;#F7464A&quot;,
                  &quot;#46BFBD&quot;,
                  &quot;#FDB45C&quot;,
                  &quot;#949FB1&quot;,
                  &quot;#4D5360&quot;,
                ],
                label: &#39;Dataset 1&#39;
            }],
            labels: [
              &quot;Red&quot;,
              &quot;Green&quot;,
              &quot;Yellow&quot;,
              &quot;Grey&quot;,
              &quot;Dark Grey&quot;
            ]
        },
        options: {
            responsive: true,
            legend: {
                position: &#39;top&#39;,
            },
            title: {
                display: true,
                text: &#39;Chart.js Doughnut Chart&#39;
            },
            animation: {
                animateScale: true,
                animateRotate: true
            }
        }
    };

    window.pPercentage = new Chart(ChartContext, config);

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/uyehv.png

Chart.js Show labels on Pie chart

I am using line chart from http://www.chartjs.org/
![enter image description here][1]


  [1]: http://i.stack.imgur.com/uDq6T.png

As you can see max value (130) and min value (60) for Y axis are chosen automatically , I want max value = 500 and min value=0. Is this possible?

How to set max and min value for Y axis

I want to draw a horizontal bar chart with Chart.js but it keeps scaling the chart instead of using the height I assign the canvas form the script.

Is there any way to set the height of the graph from the script?

See fiddle: [Jsfidle][1]


  [1]: https://jsfiddle.net/Trekels/fec0v5kj/

HTML

    &lt;div class=&quot;graph&quot;&gt;
      &lt;div class=&quot;chart-legend&quot;&gt;
    
      &lt;/div&gt;
      &lt;div class=&quot;chart&quot;&gt;
        &lt;canvas id=&quot;myChart&quot;&gt;&lt;/canvas&gt;
      &lt;/div&gt;
    &lt;/div&gt;

JavaScript

    var ctx = $(&#39;#myChart&#39;);

    ctx.height(500);
    
    var myChart = new Chart(ctx, {
        type: &#39;horizontalBar&#39;,
        data: {
            labels: [&quot;Red&quot;, &quot;Blue&quot;, &quot;Yellow&quot;, &quot;Green&quot;, &quot;Purple&quot;, &quot;Orange&quot;],
            datasets: [{
                label: &#39;# of Votes&#39;,
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    &#39;rgba(255, 99, 132, 0.2)&#39;,
                    &#39;rgba(54, 162, 235, 0.2)&#39;,
                    &#39;rgba(255, 206, 86, 0.2)&#39;,
                    &#39;rgba(75, 192, 192, 0.2)&#39;,
                    &#39;rgba(153, 102, 255, 0.2)&#39;,
                    &#39;rgba(255, 159, 64, 0.2)&#39;
                ],
                borderColor: [
                    &#39;rgba(255,99,132,1)&#39;,
                    &#39;rgba(54, 162, 235, 1)&#39;,
                    &#39;rgba(255, 206, 86, 1)&#39;,
                    &#39;rgba(75, 192, 192, 1)&#39;,
                    &#39;rgba(153, 102, 255, 1)&#39;,
                    &#39;rgba(255, 159, 64, 1)&#39;
                ],
                borderWidth: 1
            }]
        },
        maintainAspectRatio: false,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });

Set height of chart in Chart.js

I created an basic bar chart using chartjs and it works fine. Now I want to update the values on a time based interval. My problem is that after I created the chart, I do not know how to update its values correctly...

My code:
 
    var ctx = $(&quot;#myChart&quot;).get(0).getContext(&quot;2d&quot;);

    var dts = [
        {
            fillColor: &quot;rgba(220,220,220,0.5)&quot;,
            strokeColor: &quot;rgba(220,220,220,1)&quot;,
            data: [0, 0, 0, 0, 0]
        }
    ];

    var data = {
        labels: [&quot;Core#1&quot;, &quot;Core#2&quot;, &quot;Core#3&quot;, &quot;Core#4&quot;, &quot;Total&quot;],
        datasets: dts
    };

    var chart = new Chart(ctx);
    chart.Bar(data);
                    
    //test code
    setInterval( function () {                        
        data.datasets[0].data = [random(), random(), random(), random(), random()];
        chart.Bar(data);

    },2000);


in the test code, I am updating the values with `datasets[0].data`- is this the right way to do it? The problem with this is that everytime I call `chart.Bar()`, the values are reset to 0 then animated to the random value (like I am recreating the chart). This way, all animations are always from 0 to value which looks strange. I would expect that if I update a value from 50 to 10 the bar would go down to 10 from 50 and not setted to 0 then animated to 10.

I did not found anything in the docs about this... am I doing something wrong or this is impossible with this library?


Dynamically update values of a chartjs chart

I have the following codes to create a graph using Chart.js v2.1.3:

    var ctx = $(&#39;#gold_chart&#39;);
	var goldChart = new Chart(ctx, {
		type: &#39;line&#39;,
		data: {
			labels: dates,
			datasets: [{
				label: &#39;I want to remove this Label&#39;,
				data: prices,
				pointRadius: 0,
				borderWidth: 1
			}]
		}
	});

The codes look simple, but I cannot remove the label from the graph. I tried a lot of solutions I found online, but most of them use Chart.js v1.x.

How can I remove the dataset labels?

Chart.js v2 hide dataset labels

here is my code. i need to set initial value as &quot;0&quot; in both x and y axis     scales. I have tried latest version scales option.

    graphOptions = {               
                ///Boolean - Whether grid lines are shown across the chart
                scaleShowGridLines: false,    
                tooltipTitleTemplate: &quot;&lt;%= label%&gt;&quot;,
                //String - Colour of the grid lines
                scaleGridLineColor: &quot;rgba(0,0,0,.05)&quot;,
                //Number - Width of the grid lines
                scaleGridLineWidth: 1,
                //Boolean - Whether to show horizontal lines (except X axis)
                scaleShowHorizontalLines: true,
                //Boolean - Whether to show vertical lines (except Y axis)
                scaleShowVerticalLines: true,
                //Boolean - Whether the line is curved between points
                bezierCurve: true,
                //Number - Tension of the bezier curve between points
                bezierCurveTension: 0.4,
                //Boolean - Whether to show a dot for each point
                pointDot: true,
                //Number - Radius of each point dot in pixels
                pointDotRadius: 4,
                //Number - Pixel width of point dot stroke
                pointDotStrokeWidth: 1,               
                pointHitDetectionRadius: 20,               
                datasetStroke: true,
                datasetStrokeWidth: 2,
                datasetFill: true,               
                legendTemplate: &quot;&lt;ul class=\&quot;&lt;%=name.toLowerCase()%&gt;-legend\&quot;&gt;&lt;% for (var i=0; i&lt;datasets.length; i++){%&gt;&lt;li&gt;&lt;span style=\&quot;background-color:&lt;%=datasets[i].strokeColor%&gt;\&quot;&gt;&lt;/span&gt;&lt;%if(datasets[i].label){%&gt;&lt;%=datasets[i].label%&gt;&lt;%}%&gt;&lt;/li&gt;&lt;%}%&gt;&lt;/ul&gt;&quot;
            };
            var LineChart = new Chart(ctx).Line(graphData, graphOptions);
       }     

how to set start value as &quot;0&quot; in chartjs?

Is it possible using [Chart.js][1] to display data values?

I want to print the graph.

Thanks for any advice..

  [1]: http://www.chartjs.org/


How to display data values on Chart.js

I&#39;m using Chart.JS to plot a dataset,

However I got a smooth effect !

Here is the curve I&#39;ve got : 

[![enter image description here][1]][1]

Here is my code : 

&lt;!-- language: lang-js --&gt;

    function plotChart(data, labels) {

        var lineChartData = {
            &quot;datasets&quot;: [{
                &quot;data&quot;: data,
                &quot;pointStrokeColor&quot;: &quot;#fff&quot;,
                &quot;fillColor&quot;: &quot;rgba(220,220,220,0.5)&quot;,
                &quot;pointColor&quot;: &quot;rgba(220,220,220,1)&quot;,
                &quot;strokeColor&quot;: &quot;rgba(220,220,220,1)&quot;
            }],
            &quot;labels&quot;: labels
        };

        var myLine = new Chart(document.getElementById(&quot;canvas&quot;).getContext(&quot;2d&quot;)).Line(lineChartData);

    }

How can I have straight lines instead of curves ? 

Thank you


  [1]: http://i.stack.imgur.com/OW5PD.png

Chart.js : straight lines instead of curves

How to render Text inside the doughnut chart, I am using &lt;a href=&quot;http://www.chartjs.org/docs/#doughnutChart&quot;&gt;ChartJs&lt;/a&gt;.

How to add text inside the doughnut chart using Chart.js?

I&#39;m using Chartjs to display a Line Chart and this works fine:

    // get line chart canvas
    var targetCanvas = document.getElementById(&#39;chartCanvas&#39;).getContext(&#39;2d&#39;);

    // draw line chart
    var chart = new Chart(targetCanvas).Line(chartData);

But the problem occurs when I try to change the data for the Chart.  I update the graph by creating a new instance of a Chart with the new data points, and thus reinitializing the canvas. 

This works fine. However, when I hover over the new chart, if I happen to go over specific locations corresponding to points displayed on the old chart, the hover/label is still triggered and suddenly the old chart is visible.  It remains visible while my mouse is at this location and disappears when move off that point.  I don&#39;t want the old chart to display. I want to remove it completely.

I&#39;ve tried to clear both the canvas and the existing chart before loading the new one.  Like:

    targetCanvas.clearRect(0,0, targetCanvas.canvas.width, targetCanvas.canvas.height);
and

    chart.clear();

But none of these have worked so far.  Any ideas about how I can stop this from happening?


How to clear a chart from a canvas so that hover events cannot be triggered?

Does Chart.js ([documentation][1]) have option for datasets to set name (title) of chart (e.g. Temperature in my City), name of x axis (e.g. Days) and name of y axis (e.g. Temperature). Or I should solve this with css?


	var lineChartData = {
		labels : [&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;],
		datasets : [
			{
				fillColor : &quot;rgba(220,220,220,0.2)&quot;,
				strokeColor : &quot;rgba(220,220,220,1)&quot;,
				pointColor : &quot;rgba(220,220,220,1)&quot;,
				pointStrokeColor : &quot;#fff&quot;,
				pointHighlightFill : &quot;#fff&quot;,
				pointHighlightStroke : &quot;rgba(220,220,220,1)&quot;,
				data : [data]
			}
		]

	}

Realy thanks for help.

  [1]: http://www.chartjs.org/docs/

In Chart.js set chart title, name of x axis and y axis?

I&#39;m trying out the example code for Chart.js [given in the docs][1].

Width and height is specified inline on the canvas element at 400px/400px.

But when rendering the chart it&#39;s blown up to full page width, and cuts off the far right end.

How/where am I supposed to control the width/height of the chart?

  [1]: http://www.chartjs.org/docs/#getting-started-creating-a-chart


Setting width and height

I want to display all of the points on my chart from the data I get, but I don&#39;t want to display all the labels for them, because then the chart is not very readable. I was looking for it in the docs, but couldn&#39;t find any parameter that would limit this.

I don&#39;t want to take only three labels for example, because then the chart is also limited to three points. Is it possible?

I have something like that right now:

[![enter image description here][1]][1]

  [1]: http://i.stack.imgur.com/SF2HZ.png

If I could just leave every third-fourth label, it would be great. But I found absolutely nothing about labels options.

Limit labels number on Chart.js line chart

I&#39;m using ChartJS in a project I&#39;m working on and I need a different color for each bar in a Bar Chart. 

Here&#39;s an example of the bar chart data set:

    var barChartData = {
      labels: [&quot;001&quot;, &quot;002&quot;, &quot;003&quot;, &quot;004&quot;, &quot;005&quot;, &quot;006&quot;, &quot;007&quot;],
      datasets: [{
        label: &quot;My First dataset&quot;,
        fillColor: &quot;rgba(220,220,220,0.5)&quot;, 
        strokeColor: &quot;rgba(220,220,220,0.8)&quot;, 
        highlightFill: &quot;rgba(220,220,220,0.75)&quot;,
        highlightStroke: &quot;rgba(220,220,220,1)&quot;,
        data: [20, 59, 80, 81, 56, 55, 40]
      }]
    };

Is there any way to paint each bar differently?

Different color for each bar in a bar chart; ChartJS

I am trying to create a line chart with two datasets, each with its own Y scale / axis (one to the left, one to the right of the graph) using Chart.js.

This is my code ([jsfiddle][1]):

    var canvas = document.getElementById(&#39;chart&#39;);
    new Chart(canvas, {
      type: &#39;line&#39;,
      data: {
        labels: [ &#39;1&#39;, &#39;2&#39;, &#39;3&#39;, &#39;4&#39;, &#39;5&#39; ],
        datasets: [
          {
            label: &#39;A&#39;,
            yAxesGroup: &#39;A&#39;,
            data: [ 100, 96, 84, 76, 69 ]
          },
          {
            label: &#39;B&#39;,
            yAxesGroup: &#39;B&#39;,
            data: [ 1, 1, 1, 1, 0 ]
          }
        ]
      },
      options: {
        yAxes: [
          {
            name: &#39;A&#39;,
            type: &#39;linear&#39;,
            position: &#39;left&#39;,
            scalePositionLeft: true
          },
          {
            name: &#39;B&#39;,
            type: &#39;linear&#39;,
            position: &#39;right&#39;,
            scalePositionLeft: false,
            min: 0,
            max: 1
          }
        ]
      }
    });

However, the second axis is not visible and the second dataset is still scaled exactly as the first (0 to 100 instead of 0 to 1). What do I need to change?

  [1]: https://jsfiddle.net/zqx627kt/

How to use two Y axes in Chart.js v2?

Originally I set the fill color for each point to be completely transparent. If I run my mouse over the graph, the points pop up. I want to hide all points so that the line graph is smooth. 



Hide points in ChartJS LineGraph

[The API for `chart.js`][1] allows one to edit points of the datasets loaded into it, for example:

&gt; ###`.update( )`
&gt; 
&gt; Calling update() on your Chart instance will re-render the chart with
&gt; any updated values, allowing you to edit the value of multiple
&gt; existing points, then render those in one animated render loop.
&gt; 
&gt; ###`.addData( valuesArray, label )`
&gt; 
&gt; Calling addData(valuesArray, label) on your Chart instance passing an
&gt; array of values for each dataset, along with a label for those points.
&gt; 
&gt; ###`.removeData( )`
&gt; 
&gt; Calling removeData() on your Chart instance will remove the first
&gt; value for all datasets on the chart.

All of these are great, but I cannot figure out how to load an entirely new dataset in, wiping out the old. The documentation does not seem to cover this.

  [1]: http://www.chartjs.org/docs/#line-chart

chart.js load totally new data

In (https://stackoverflow.com/questions/19167827/android-webview-html5-canvas-error) i posted a question regarding plotting graphs using Graph.js library.
The problem i have now is that if i call the function to plot the graph multiple times, the canvas resizes every time. Each time the graph is redrawn to the same canvas, its size also changes.
I also tried setting the size of the canvas but without success.

What could be the reason? Why does the canvas resize every time?

Chart.js canvas resize

I am using the **Chart.js** library to draw a **bar graph**, it is working fine, but now I want to destroy the **bar graph** and make a **line graph** in the same **canvas**. I have tried these two ways to clear the canvas:

    var grapharea = document.getElementById(&quot;barChart&quot;).getContext(&quot;2d&quot;);
    
    grapharea.destroy();
    
    var myNewChart = new Chart(grapharea, { type: &#39;radar&#39;, data: barData, options: barOptions });

second way:

    var grapharea = document.getElementById(&quot;barChart&quot;).getContext(&quot;2d&quot;);
    
    grapharea.clear();
    
    var myNewChart = new Chart(grapharea, { type: &#39;radar&#39;, data: barData, options: barOptions });

Am I calling it right? OnButtonClick I call this function which uses the same canvas.

Destroy chart.js bar graph to redraw other graph in same &lt;canvas&gt;

I have used chart.js in my projects several times but I have never used d3.js. A lot of people say that d3.js is the best javascript framework for charts but none of them is able to explain why, especially when I want a comparison to chart.js.

I have found this: http://www.fusioncharts.com/javascript-charting-comparison/
but it is not what I was looking for.

Does anyone know about a comparison of these frameworks in terms of usability and performance (only for charts)?

Comparison between d3.js and chart.js (only for charts)

How can I draw an vertical line at a particular point on the x-axis using Chart.js?

In particular, I want to draw a line to indicate the current day on a LineChart. Here&#39;s a mockup of the chart:
http://i.stack.imgur.com/VQDWR.png

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/VQDWR.png

Chart.js — drawing an arbitrary vertical line

I&#39;m using [Chart.js](http://www.chartjs.org/) to draw a simple bar plot and I need to format its Y axis like

&gt; 123456.05 to 123 456,05 $

I don&#39;t understand how to use [`scaleLabel : &quot;&lt;%=value%&gt;&quot;`](http://www.chartjs.org/docs/#getting-started-global-chart-configuration)

I saw [someone pointing](https://github.com/nnnick/Chart.js/issues/68#issuecomment-20487489) to &quot;[JS Micro-Templating](http://ejohn.org/blog/javascript-micro-templating/)&quot;,  
but no clue how to use that with our `scaleLabel` option.

Does someone know how to format this Y axis, and maybe give me an example ?

Chart.js - Formatting Y axis

Okay, so I have a ChartJS line chart working that populates directly from data coming for my db.
What I need now is to get rid of the color underneath each of the lines. [as seen in the screenshot below].


[![Example of Graph][1]][1]

Here&#39;s my HTML:

    &lt;div ng-if=&quot;hasData&quot;&gt;
        &lt;canvas id=&quot;line&quot; class=&quot;chart chart-line&quot; data=&quot;data&quot; labels=&quot;labels&quot; legend=&quot;true&quot; series=&quot;series&quot; options=&quot;options&quot; click=&quot;onClick&quot;&gt;&lt;/canvas&gt;
    &lt;div&gt;

Here&#39;s My JS:
                
                scope.labels = [&#39;02:00&#39;,&#39;04:00&#39;,&#39;06:00&#39;, &#39;08:00&#39;, &#39;10:00&#39;, &#39;12:00&#39;,&#39;14:00&#39;, &#39;16:00&#39;, &#39;18:00&#39;, &#39;20:00&#39;, &#39;22:00&#39;];
                scope.series = series;
                scope.data = [volumesSelectedDate, volumesPeakDate, volumesModelCapacity];
                
                                
                scope.options = {
                    scaleOverride: true,
                    scaleStartValue: 0,
                    scaleSteps: 11,
                    scaleStepWidth: 6910,
                }
                
                scope.loadingDailyAppVolumes = false;
                scope.hasData = true;
                
                
            };
            scope.onClick = function (points, evt) {
                //console.log(points, evt);
            };
        
So, how would I go about this?
Also, how would I go about manually setting the color for each line?

Example:

selected date: blue, 
peak date: yellow, 
model capacity: grey.

Thanks.

 [1]: http://i.stack.imgur.com/SY5hu.png

ChartJS Line Charts - remove color underneath lines

How do I hide the x-axis label/text that is displayed in chart.js ?

Setting `scaleShowLabels:false` only removes the y-axis labels.

    &lt;script&gt;
		var options = {
			scaleFontColor: &quot;#fa0&quot;,
			datasetStrokeWidth: 1,
			scaleShowLabels : false,
			animation : false,
			bezierCurve : true,
			scaleStartValue: 0,
		};
		var lineChartData = {
			labels : [&quot;1&quot;,&quot;2&quot;,&quot;3&quot;,&quot;4&quot;,&quot;5&quot;,&quot;6&quot;,&quot;7&quot;],
			datasets : [
				{
					fillColor : &quot;rgba(151,187,205,0.5)&quot;,
					strokeColor : &quot;rgba(151,187,205,1)&quot;,
					pointColor : &quot;rgba(151,187,205,1)&quot;,
					pointStrokeColor : &quot;#fff&quot;,
					data : [1,3,0,0,6,2,10]
				}
			]
			
		}

	var myLine = new Chart(document.getElementById(&quot;canvas&quot;).getContext(&quot;2d&quot;)).Line(lineChartData,options);
	
	&lt;/script&gt;

Remove x-axis label/text in chart.js

I&#39;ve got a question regard Chart.js. 

I&#39;ve drawn multiple piecharts using the documentation provided. I was wondering if on click of a certain slice of one of the charts, I can make an ajax call depending on the value of that slice? 

For example, if this is my `data`

    var data = [
        {
            value: 300,
            color:&quot;#F7464A&quot;,
            highlight: &quot;#FF5A5E&quot;,
            label: &quot;Red&quot;
        },
        {
            value: 50,
            color: &quot;#46BFBD&quot;,
            highlight: &quot;#5AD3D1&quot;,
            label: &quot;Green&quot;
        },
        {
            value: 100,
            color: &quot;#FDB45C&quot;,
            highlight: &quot;#FFC870&quot;,
            label: &quot;Yellow&quot;
        }
    ], 

is it possible for me to click on the `Red` labelled slice and call a url of the following form:
`example.com?label=red&amp;value=300`? If yes, how do I go about this?

Click events on Pie Charts in Chart.js

Using chart.js v2, is it possible to mark a dataset in a line chart as being disabled on initial load?

[![enter image description here][1]][1]

Didn&#39;t find an option for it in the [documentation][2].


  [1]: http://i.stack.imgur.com/WcHzR.png
  [2]: http://www.chartjs.org/docs/#line-chart

Chart.js - How to set a line chart dataset as disabled on load

I am using [this][1] library to draw charts in my web app. The issue is that I am having decimal points in my y-axis. You can see that in the image below [![enter image description here][2]][2]

Is there a way that I can restrict it to only have numbers? 


  [1]: http://www.chartjs.org/docs/
  [2]: http://i.stack.imgur.com/Hnair.png

This is my code 
        
    var matches = $(&quot;#matches&quot;).get(0).getContext(&quot;2d&quot;);
        
    var data = {
            labels: labelsFromCurrentDateTillLastWeek,
            datasets: [
                {
                    label: &quot;Last Weeks Matches&quot;,
                    fillColor: &quot;rgba(220,220,220,0.2)&quot;,
                    strokeColor: &quot;rgba(220,220,220,1)&quot;,
                    pointColor: &quot;rgba(220,220,220,1)&quot;,
                    pointStrokeColor: &quot;#fff&quot;,
                    pointHighlightFill: &quot;#fff&quot;,
                    pointHighlightStroke: &quot;rgba(220,220,220,1)&quot;,
                    data: result
                }
            ]
        };

        var options = {
            scaleLabel: function (label) {
                return Math.round(label.value);
            }
        };

        var myLineChart = new Chart(matches, {
            type: &#39;bar&#39;,
            data: data,
            options: options

        })

Skip decimal points on y-axis in chartJS

I&#39;ve seen other javascript charting libraries that supported grouped barcharts, of the sort in the image below. I&#39;ve not seen this as an explicit option in chart.js&#39;s online editor.

Is it possible to do grouped bar charts of this sort in chart.js? Is it easy? Is there a template for it in their online editor?

![][1]


  [1]: http://i.stack.imgur.com/ZkvI1.png

Grouped bar charts, in chart.js

I&#39;m using Charts.js to show a graph on my site. Currently, the label shows as a long string of numbers (i.e 123456).
I want it to show as currency with thousands separator: (i.e $123,456)

I&#39;m using the scaleLabel option to put a $ USD symbol before the value:

    scaleLabel: &quot;&lt;%= &#39; $&#39; + Number(value)%&gt;&quot;

and a function to insert the comma separator:

    function(label){return label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, &quot;,&quot;);}

I just do not know how to use these together to get what I want.

Here is the fiddle: http://jsfiddle.net/vy0yhd6m/79/

&lt;i&gt;(please keep in mind that currently the graph will only work if you remove one of those two pieces of JavaScript cited above)&lt;/i&gt;

Thank you for any and all help.


Charts.js Formatting Y Axis with both Currency and Thousands Separator

I&#39;m using chart.js to create a bar chart and can&#39;t seem to change the label colors or the legend colors. I figured out how to change the tick colors, but I&#39;m not sure where to put the &#39;scaleFontColor&#39;, if that is indeed what I need to be using.

Here is a link to what it looks like now.
http://imgur.com/nxaH1mk

And here is my code:
    
    var ctx = document.getElementById(&quot;myChart&quot;);
    var myChart = new Chart(ctx, {
    	scaleFontColor: &quot;white&quot;,
        type: &quot;bar&quot;,
        data: {
            labels: &lt;?php echo json_encode($timeSlice); ?&gt;, 
            datasets: [{
             	label: &quot;A Label&quot;,
    			backgroundColor: &quot;rgba(159,170,174,0.8)&quot;,
                borderWidth: 1,
                hoverBackgroundColor: &quot;rgba(232,105,90,0.8)&quot;,
                hoverBorderColor: &quot;orange&quot;,
                scaleStepWidth: 1,
            	data: &lt;?php echo json_encode($myCount); ?&gt;
            }]
        },
        options: {
        	legend: {
        		fontColor: &quot;white&quot;
        	},
            scales: { 
                yAxes: [{
                    ticks: {
                    	fontColor: &quot;white&quot;,
                    	stepSize: 1,
                        beginAtZero: true
                    }
                }]
            }
        }
    });

Any help would be greatly appreciated.

Chart.js label color

I have a chart that I want to include in my website using [Chart.js][1]. In the Y-axis, it gives me real numbers instead of integers. How can I change the number to integers?

Here&#39;s a picture of what I have now: 

[![current chart with real numbers][2]][2]


And this is the code:

	var lineChartData = {
                        
		labels : [&quot;2013/04/01&quot;,&quot;2013/03/31&quot;, &quot;2013/03/30&quot;, &quot;2013/03/29&quot;, &quot;2013/03/28&quot;,&quot;2013/03/27&quot;, &quot;2013/03/26&quot;],
      
		datasets : [
			{
				fillColor : &quot;rgba(151,187,205,0.5)&quot;,
				strokeColor : &quot;rgba(151,187,205,1)&quot;,
				pointColor : &quot;rgba(151,187,205,1)&quot;,
				pointStrokeColor : &quot;#fff&quot;,
				data : [&quot;0&quot;, &quot;2&quot;,&quot;1&quot;, &quot;0&quot;, &quot;1&quot;,&quot;0&quot;,&quot;1&quot;]
			}
		]
			
	}

	var myLine = new Chart(document.getElementById(&quot;canvas&quot;).getContext(&quot;2d&quot;)).Bar(lineChartData);


  [1]: http://www.chartjs.org/
  [2]: http://i.stack.imgur.com/F9nUW.png

Change the Y-axis values from real numbers to integers in Chart.js

I&#39;m trying to make a graph with Charts.js (current one is just a really simple example I&#39;m trying to get working, somewhat taken from the Chart.js documentation) and the graph isn&#39;t scaling to the size of the canvas I&#39;m giving it. Here is all the relevant code. 

To import it:

    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js&quot;&gt;&lt;/script&gt;


Then, I connect it to a javascript file as follows: 

    &lt;script type=&quot;text/javascript&quot; src=&quot;js/stats_tab.js&quot;&gt;&lt;/script&gt;

I have my canvas set up: 

            &lt;div id=&quot;graph_2015&quot; class =&quot;stats_box&quot;&gt;
                &lt;h4&gt;Graph 2015&lt;/h4&gt;
                Text
                &lt;canvas id=&quot;myChart&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;&lt;/canvas&gt;
            &lt;/div&gt;

And then finally in stats_tab.js, I have the following code:


    window.onload=function(){
        var ctx = document.getElementById(&quot;myChart&quot;).getContext(&quot;2d&quot;);
        var myChart = new Chart(ctx, {
            type: &#39;line&#39;,
            data: {
                labels: [1,2,3,4,5,6,7,8,9,10],
                datasets: [
                    {
                        label: &quot;My First dataset&quot;,
                        data: [1,2,3,2,1,2,3,4,5,4]
                    }
                ]
            },
            options: {
            }
        });
    }

The graph displays nicely, but it refuses to scale to the size of the canvas I gave it. There is also no css relevant to any of the divs involved. The inspect feature on chrome lets me know that the final graph is 676 by 676 instead of the 200 by 200 I specified. Not really sure what&#39;s going on.

Thanks!

Charts.js graph not scaling to canvas size

I&#39;m using Chart js version: 2.1.4 and I&#39;m not able to limit the bar width. I found two options on stackoverflow
     
    barPercentage: 0.5
or

    categorySpacing: 0

but neither of one works with the mentioned version. Is there a way to solve this issue without manually modifying the chart.js core library?

thanks

chart js 2 how to set bar width

I am using [Chartjs](http://www.chartjs.org) for showing diagrams and I need to set title of y axis, but there are no information about it in documentation. 

I need y axis to be set like on picture, or on top of y axis so someone could now what is that parameter

![](https://js.devexpress.com/Content/images/doc/15_1/ChartJS/fullStackedSplineArea.png)

I have looked on official website but there was no information about it

How to set ChartJS Y axis title?

In chart.js how can I set the set the font size for just the x axis labels without touching global config?

I&#39;ve already tried setting the &#39;scaleFontSize&#39; option my options object.
I&#39;ve also tried setting:

    {
      ...
      scales: {
        xAxes: [{
          scaleFontSize: 40
          ...
        }]
       }
    }

Chart.js axes label font size

I am trying to use the basic example of NG2-Charts (http://valor-software.com/ng2-charts/)

I copy pasted the HTML part

      &lt;div style=&quot;display: block&quot;&gt;
        &lt;canvas baseChart
            [datasets]=&quot;barChartData&quot;
            [labels]=&quot;barChartLabels&quot;
            [options]=&quot;barChartOptions&quot;
            [legend]=&quot;barChartLegend&quot;
            [chartType]=&quot;barChartType&quot;
            (chartHover)=&quot;chartHovered($event)&quot;
            (chartClick)=&quot;chartClicked($event)&quot;&gt;&lt;/canvas&gt;
      &lt;/div&gt;

and the TypeScript part

      private barChartOptions: any = {
        scaleShowVerticalLines: false,
        responsive: true
      };
      private barChartLabels: string[] = [&#39;2006&#39;, &#39;2007&#39;, &#39;2008&#39;, &#39;2009&#39;, &#39;2010&#39;, &#39;2011&#39;, &#39;2012&#39;];
      private barChartType: string = &#39;bar&#39;;
      private barChartLegend: boolean = true;

      private barChartData: any[] = [
        { data: [65, 59, 80, 81, 56, 55, 40], label: &#39;Series A&#39; },
        { data: [28, 48, 40, 19, 86, 27, 90], label: &#39;Series B&#39; }
      ];

      // events
      private chartClicked(e: any): void {
          console.log(e);
      }

      private chartHovered(e: any): void {
          console.log(e);
      }

I run `npm install ng2-charts --save`, `npm install chart.js --save` and `typings install dt~chart.js --save --global`

I also imported chart.js in my vendor.ts file

    import &#39;chart.js&#39;;

My dependencies: 

    {
        &quot;@angular/common&quot;: &quot;^2.0.0&quot;,
        &quot;@angular/compiler&quot;: &quot;2.0.0&quot;,
        &quot;@angular/core&quot;: &quot;2.0.0&quot;,
        &quot;@angular/forms&quot;: &quot;2.0.0&quot;,
        &quot;@angular/http&quot;: &quot;2.0.0&quot;,
        &quot;@angular/platform-browser&quot;: &quot;2.0.0&quot;,
        &quot;@angular/platform-browser-dynamic&quot;: &quot;2.0.0&quot;,
        &quot;@angular/router&quot;: &quot;3.0.0&quot;,
        &quot;angular2-jwt&quot;: &quot;^0.1.18&quot;,
        &quot;chart.js&quot;: &quot;^2.3.0&quot;,
        &quot;core-js&quot;: &quot;^2.4.0&quot;,
        &quot;json-loader&quot;: &quot;^0.5.4&quot;,
        &quot;moment&quot;: &quot;^2.14.1&quot;,
        &quot;ng2-charts&quot;: &quot;^1.4.0&quot;,
        &quot;reflect-metadata&quot;: &quot;0.1.2&quot;,
        &quot;rxjs&quot;: &quot;5.0.0-beta.11&quot;,
        &quot;zone.js&quot;: &quot;^0.6.23&quot;
      }

Here is the Error

    Unhandled Promise rejection: Template parse errors:
    Can&#39;t bind to &#39;datasets&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;iuminfooneoptionsTwo&quot;&gt;
                &lt;div style=&quot;display: block&quot;&gt;
                    &lt;canvas baseChart [ERROR -&gt;][datasets]=&quot;barChartData&quot; [labels]=&quot;barChartLabels&quot; [options]=&quot;barChartOptions&quot; [legend]=&quot;barChartLeg&quot;): PlayerprofileComponent@39:34
    Can&#39;t bind to &#39;labels&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;          &lt;div style=&quot;display: block&quot;&gt;
                    &lt;canvas baseChart [datasets]=&quot;barChartData&quot; [ERROR -&gt;][labels]=&quot;barChartLabels&quot; [options]=&quot;barChartOptions&quot; [legend]=&quot;barChartLegend&quot; [chartType]=&quot;barChart&quot;): PlayerprofileComponent@39:60
    Can&#39;t bind to &#39;options&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;lay: block&quot;&gt;
                    &lt;canvas baseChart [datasets]=&quot;barChartData&quot; [labels]=&quot;barChartLabels&quot; [ERROR -&gt;][options]=&quot;barChartOptions&quot; [legend]=&quot;barChartLegend&quot; [chartType]=&quot;barChartType&quot; (chartHover)=&quot;chartH&quot;): PlayerprofileComponent@39:86
    Can&#39;t bind to &#39;legend&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;  &lt;canvas baseChart [datasets]=&quot;barChartData&quot; [labels]=&quot;barChartLabels&quot; [options]=&quot;barChartOptions&quot; [ERROR -&gt;][legend]=&quot;barChartLegend&quot; [chartType]=&quot;barChartType&quot; (chartHover)=&quot;chartHovered($event)&quot; (chartClick)&quot;): PlayerprofileComponent@39:114
    Can&#39;t bind to &#39;chartType&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;ets]=&quot;barChartData&quot; [labels]=&quot;barChartLabels&quot; [options]=&quot;barChartOptions&quot; [legend]=&quot;barChartLegend&quot; [ERROR -&gt;][chartType]=&quot;barChartType&quot; (chartHover)=&quot;chartHovered($event)&quot; (chartClick)=&quot;chartClicked($event)&quot;&gt;
    &quot;): PlayerprofileComponent@39:140 ; Zone: &lt;root&gt; ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
    Can&#39;t bind to &#39;datasets&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;iuminfooneoptionsTwo&quot;&gt;
                &lt;div style=&quot;display: block&quot;&gt;
                    &lt;canvas baseChart [ERROR -&gt;][datasets]=&quot;barChartData&quot; [labels]=&quot;barChartLabels&quot; [options]=&quot;barChartOptions&quot; [legend]=&quot;barChartLeg&quot;): PlayerprofileComponent@39:34
    Can&#39;t bind to &#39;labels&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;          &lt;div style=&quot;display: block&quot;&gt;
                    &lt;canvas baseChart [datasets]=&quot;barChartData&quot; [ERROR -&gt;][labels]=&quot;barChartLabels&quot; [options]=&quot;barChartOptions&quot; [legend]=&quot;barChartLegend&quot; [chartType]=&quot;barChart&quot;): PlayerprofileComponent@39:60
    Can&#39;t bind to &#39;options&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;lay: block&quot;&gt;
                    &lt;canvas baseChart [datasets]=&quot;barChartData&quot; [labels]=&quot;barChartLabels&quot; [ERROR -&gt;][options]=&quot;barChartOptions&quot; [legend]=&quot;barChartLegend&quot; [chartType]=&quot;barChartType&quot; (chartHover)=&quot;chartH&quot;): PlayerprofileComponent@39:86
    Can&#39;t bind to &#39;legend&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;  &lt;canvas baseChart [datasets]=&quot;barChartData&quot; [labels]=&quot;barChartLabels&quot; [options]=&quot;barChartOptions&quot; [ERROR -&gt;][legend]=&quot;barChartLegend&quot; [chartType]=&quot;barChartType&quot; (chartHover)=&quot;chartHovered($event)&quot; (chartClick)&quot;): PlayerprofileComponent@39:114
    Can&#39;t bind to &#39;chartType&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;ets]=&quot;barChartData&quot; [labels]=&quot;barChartLabels&quot; [options]=&quot;barChartOptions&quot; [legend]=&quot;barChartLegend&quot; [ERROR -&gt;][chartType]=&quot;barChartType&quot; (chartHover)=&quot;chartHovered($event)&quot; (chartClick)=&quot;chartClicked($event)&quot;&gt;
    &quot;): PlayerprofileComponent@39:140
        at TemplateParser.parse (eval at &lt;anonymous&gt; (http://localhost:8080/vendor.js:623:1), &lt;anonymous&gt;:133:19)
        at RuntimeCompiler._compileTemplate (eval at &lt;anonymous&gt; (http://localhost:8080/vendor.js:2103:1), &lt;anonymous&gt;:244:51)
        at eval (eval at &lt;anonymous&gt; (http://localhost:8080/vendor.js:2103:1), &lt;anonymous&gt;:167:83)
        at Set.forEach (native)
        at compile (eval at &lt;anonymous&gt; (http://localhost:8080/vendor.js:2103:1), &lt;anonymous&gt;:167:47)
        at ZoneDelegate.invoke (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:192:28)
        at Zone.run (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:85:43)
        at eval (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:451:57)
        at ZoneDelegate.invokeTask (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:225:37)
        at Zone.runTask (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:125:47)
        at drainMicroTaskQueue (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:357:35)

The NG2-Charts website says I need to include this in the HTML

    &lt;script src=&quot;node_modules/chart.js/src/chart.js&quot;&gt;&lt;/script&gt;

But I think thats not correct because how would that statement work in a productive minified / built app? I also thought my webpack import statement would already take care of that? 
I googled around but sadly only found stuff for some Angular 2 Beta version on NG2 Charts. 

Does anyone has an idea on how to fix that? 

Thanks and Cheers, 
Raphael Hippe

NG2-Charts Can&#39;t bind to &#39;datasets&#39; since it isn&#39;t a known property of &#39;canvas&#39;

I&#39;m trying to get charts.js to display the label name from each dataset in the tooltip.

My code:

	var barChartData = {
		labels : [&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;],
		datasets : [
		
			{
			    label: &quot;Bob&quot;,
				fillColor : &quot;rgba(88,196,246,0.5)&quot;,
				strokeColor : &quot;rgba(88,196,246,0.8)&quot;,
				highlightFill: &quot;rgba(88,196,246,0.75)&quot;,
				highlightStroke: &quot;rgba(88,196,246,1)&quot;,
				data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
			},
			{
			    label: &quot;Tina&quot;,
				fillColor : &quot;rgba(74,211,97,0.5)&quot;,
				strokeColor : &quot;rgba(74,211,97,0.8)&quot;,
				highlightFill : &quot;rgba(74,211,97,0.75)&quot;,
				highlightStroke : &quot;rgba(74,211,97,1)&quot;,
				data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
			}
			
		]
	}

	var ctx = document.getElementById(&quot;canvas&quot;).getContext(&quot;2d&quot;);
	window.myBar = new Chart(ctx).Line(barChartData, {
		responsive : true,
		animation: true,
		barValueSpacing : 5,
		barDatasetSpacing : 1,
		tooltipFillColor: &quot;rgba(0,0,0,0.8)&quot;,				
		multiTooltipTemplate: &quot;&lt;%= label %&gt; - &lt;%= value %&gt;&quot;
				
	});


With my above code the tooltip when hovering above &quot;January&quot; displays:

    January
    January - xx
    January - xx

Any ideas how I can get it to display the following?

    January
    Bob - xx
    Tina - xx



Chart.js multiTooltip labels

I have looked at various documentation and similar questions on here, but cannot seem to find the particular solution. Apologies if I have missed anything obvious or have repeated this question!

As a bit of background info, I have implemented 4 graphs using the Chart.js plugin and passed in the required data using PHP from a database. This is all working correctly and is fine. 

My problem is I need to display the data in the tooltips as formatted data aka. as numeric with %. As an example, one of my data from database is -0.17222. I have formatted it as a percentage to display in my table and all is well. However, when setting the data for the chart.js bar graph, the data is obviously missing this formatting and displaying as the -0.17222 which I do not want.

Sorry, I wanted to post a picture, but my reputation is too rubbish!

I grab data from database, then set into my table:

    var kpiRex = new Handsontable(example1, {
        data: getRexData(),

 Then I feed this data like so in the chart section:

    data: kpiRex.getDataAtRow(3)

Any help would be great! I&#39;ve been stuck on this for hours and it&#39;s probably something really simple I am overlooking.

JavaScript Chart.js - Custom data formatting to display on tooltip

The documentation for chart.js mentions &quot;legend templates&quot; but gives no resources or examples of such legends. How can these be displayed?

How can labels/legends be added for all chart types in chart.js (chartjs.org)?

I&#39;m trying to hide the tooltips in a line chart using chart.js.

I have tried this code, but they never hide.

    Chart.defaults.global.tooltipenabled = false;

You can see all the code here of the chart:

https://jsfiddle.net/w6zs07xx/
Thanks!

All chart.js Solutions on Gang of Coders

Total of 49 chart.js Solutions