how to display data values on Chart js

Question

I would like to ask if it s possible using Chart js  to display data values  I want to print the graph   Thanks for any advice

User · Answer

Following this good answer  I d use these options for a bar chart   var chartOptions         animation  false      responsive   true      tooltipTemplate    lt    value   gt        tooltipFillColor   rgba 0 0 0 0        tooltipFontColor    444       tooltipEvents          tooltipCaretSize  0      onAnimationComplete  function                 this showTooltip this datasets 0  bars  true             window myBar   new Chart ctx1  Bar chartData  chartOptions       This still uses the tooltip system and his advantages  automatic positionning  templating       but hiding the decorations  background color  caret

User · Answer

Based on  Ross s answer answer for Chart js 2 0 and up  I had to include a little tweak to guard against the case when the bar s heights comes too chose to the scale boundary     The animation attribute of the bar chart s option   animation                duration  500              easing   easeOutQuart               onComplete  function                      var ctx   this chart ctx                  ctx font   Chart helpers fontString Chart defaults global defaultFontFamily   normal   Chart defaults global defaultFontFamily                   ctx textAlign    center                   ctx textBaseline    bottom                    this data datasets forEach function  dataset                        for  var i   0  i  lt  dataset data length  i                              var model   dataset  meta Object keys dataset  meta  0   data i   model                              scale max   dataset  meta Object keys dataset  meta  0   data i   yScale maxHeight                          ctx fillStyle     444                           var y pos   model y - 5                             Make sure data value does not get overflown and hidden                            when the bar s value is too close to max value of scale                            Note  The y value is reverse  it counts from top down                         if   scale max - model y    scale max  gt   0 93                              y pos   model y   20                           ctx fillText dataset data i   model x  y pos

User · Answer

From chart js samples  file Chart js-2 4 0 samples data labelling html                    Define a plugin to provide data labels       Chart plugins register           afterDatasetsDraw  function chartInstance  easing                   To only draw at the end of animation  check for easing     1             var ctx   chartInstance chart ctx               chartInstance data datasets forEach function  dataset  i                    var meta   chartInstance getDatasetMeta i                   if   meta hidden                        meta data forEach function element  index                               Draw the text in black  with the specified font                         ctx fillStyle    rgb 0  0  0                             var fontSize   16                          var fontStyle    normal                           var fontFamily    Helvetica Neue                           ctx font   Chart helpers fontString fontSize  fontStyle  fontFamily                               Just naively convert to string for now                         var dataString   dataset data index  toString                                Make sure alignment settings are correct                         ctx textAlign    center                           ctx textBaseline    middle                            var padding   5                          var position   element tooltipPosition                            ctx fillText dataString  position x  position y -  fontSize   2  - padding

User · Answer

I think the nicest option to do this in chartJS v2 x is by using a plugin  so you don t have a large block of code in the options  In addition  it prevents the data from disappearing when hovering over a bar   I e  simply use this code  which registers a plugin that adds the text after the chart is drawn   Chart pluginService register       afterDraw  function chartInstance            var ctx   chartInstance chart ctx              render the value of the chart above the bar         ctx font   Chart helpers fontString Chart defaults global defaultFontSize   normal   Chart defaults global defaultFontFamily           ctx textAlign    center           ctx textBaseline    bottom            chartInstance data datasets forEach function  dataset                for  var i   0  i  lt  dataset data length  i                      var model   dataset  meta Object keys dataset  meta  0   data i   model                  ctx fillText dataset data i   model x  model y - 2

User · Answer

I d recommend using this plugin  https   github com chartjs chartjs-plugin-datalabels  Labels can be added to your charts simply by importing the plugin to the js file e g    import  chartjs-plugin-datalabels    And can be fine tuned using these docs  https   chartjs-plugin-datalabels netlify com options html

User · Answer

If you are using the plugin chartjs-plugin-datalabels then the following code options object will help  Make sure you import import  chartjs-plugin-datalabels   in your typescript file or add reference to  lt script src  chartjs-plugin-datalabels js  gt  lt  script gt  in your javascript file   options        maintainAspectRatio  false      responsive  true      scales          yAxes             ticks              beginAtZero  true                                plugins          datalabels            anchor   end           align   top           formatter  Math round          font              weight   bold

User · Answer

From my experience  once you include the chartjs-plugin-datalabels plugin  make sure to place the  lt script gt  tag after the chart js tag on your page   your charts begin to display values   If you then choose you can customize it to fit your needs  The customization is clearly documented here but basically  the format is like this hypothetical example   var myBarChart   new Chart ctx        type   bar       data  yourDataObject      options               other options         plugins                datalabels                    anchor   end                   align   top                      and if you need to format how the value is displayed                    formatter  function value  context                        return GetValueFormatted value

User · Answer

Late edit  there is an official plugin for Chart js 2 7 0  to do this  https   github com chartjs chartjs-plugin-datalabels  Original answer   You can loop through the points   bars onAnimationComplete and display the values    Preview      HTML   lt canvas id  myChart1  height  300  width  500  gt  lt  canvas gt   lt canvas id  myChart2  height  300  width  500  gt  lt  canvas gt    Script  var chartData         labels    January    February    March    April    May    June        datasets                          fillColor    79D1CF               strokeColor    79D1CF               data   60  80  81  56  55  40                      var ctx   document getElementById  myChart1   getContext  2d    var myLine   new Chart ctx  Line chartData        showTooltips  false      onAnimationComplete  function               var ctx   this chart ctx          ctx font   this scale font          ctx fillStyle   this scale textColor         ctx textAlign    center           ctx textBaseline    bottom            this datasets forEach function  dataset                dataset points forEach function  points                    ctx fillText points value  points x  points y - 10                                         var ctx   document getElementById  myChart2   getContext  2d    var myBar   new Chart ctx  Bar chartData        showTooltips  false      onAnimationComplete  function               var ctx   this chart ctx          ctx font   this scale font          ctx fillStyle   this scale textColor         ctx textAlign    center           ctx textBaseline    bottom            this datasets forEach function  dataset                dataset bars forEach function  bar                    ctx fillText bar value  bar x  bar y - 5                                            Fiddle - http   jsfiddle net uh9vw0ao

User · Answer

Here is an updated version for Chart js 2 3  Sep 23  2016  Edited my code to work with v2 3 for both line bar type   Important  Even if you don t need the animation  don t change the duration option to 0  otherwise you will get chartInstance controller is undefined error    x000D   x000D  var chartData     x000D      labels    January    February    March    April    May    June    x000D          datasets    x000D                x000D                  fillColor    79D1CF   x000D                  strokeColor    79D1CF   x000D                  data   60  80  81  56  55  40  x000D                x000D            x000D         x000D   x000D  var opt     x000D      events  false  x000D      tooltips    x000D          enabled  false x000D         x000D      hover    x000D          animationDuration  0 x000D         x000D      animation    x000D          duration  1  x000D          onComplete  function      x000D              var chartInstance   this chart  x000D                  ctx   chartInstance ctx  x000D              ctx font   Chart helpers fontString Chart defaults global defaultFontSize  Chart defaults global defaultFontStyle  Chart defaults global defaultFontFamily   x000D              ctx textAlign    center   x000D              ctx textBaseline    bottom   x000D   x000D              this data datasets forEach function  dataset  i    x000D                  var meta   chartInstance controller getDatasetMeta i   x000D                  meta data forEach function  bar  index    x000D                      var data   dataset data index                               x000D                      ctx fillText data  bar  model x  bar  model y - 5   x000D                      x000D                  x000D            x000D        x000D     x000D   var ctx   document getElementById  Chart1    x000D       myLineChart   new Chart ctx    x000D          type   bar   x000D          data  chartData  x000D          options  opt x000D           x000D   lt canvas id  myChart1  height  300  width  500  gt  lt  canvas gt  x000D   x000D   x000D

User · Answer

Edited  ajhuddy s answer a little  Only for bar charts  My version adds    Fade in animation for the values  Prevent clipping by positioning the value inside the bar if the bar is too high  No blinking      Downside  When hovering over a bar that has value inside it the value might look a little jagged  I have not found a solution do disable hover effects  It might also need tweaking depending on your own settings   Configuration   bar      tooltips        enabled  false        hover        animationDuration  0        animation        onComplete  function           this chart controller draw          drawValue this  1              onProgress  function state          var animation   state animationObject        drawValue this  animation currentStep   animation numSteps                 Helpers      Font color for values inside the bar var insideFontColor    255 255 255      Font color for values above the bar var outsideFontColor    0 0 0      How close to the top edge bar can be before the value is put inside it var topThreshold   20   var modifyCtx   function ctx      ctx font   Chart helpers fontString Chart defaults global defaultFontSize   normal   Chart defaults global defaultFontFamily     ctx textAlign    center     ctx textBaseline    bottom     return ctx      var fadeIn   function ctx  obj  x  y  black  step      var ctx   modifyCtx ctx     var alpha   0    ctx fillStyle   black    rgba     outsideFontColor         step          rgba     insideFontColor         step          ctx fillText obj  x  y       var drawValue   function context  step      var ctx   context chart ctx     context data datasets forEach function  dataset        for  var i   0  i  lt  dataset data length  i            var model   dataset  meta Object keys dataset  meta  0   data i   model        var textY    model y  gt  topThreshold    model y - 3   model y   20        fadeIn ctx  dataset data i   model x  textY  model y  gt  topThreshold  step

User · Answer

This animation option works for 2 1 3 on a bar chart   Slightly modified  Ross answer   animation    duration  0  onComplete  function             render the value of the chart above the bar     var ctx   this chart ctx      ctx font   Chart helpers fontString Chart defaults global defaultFontSize   normal   Chart defaults global defaultFontFamily       ctx fillStyle   this chart config options defaultFontColor      ctx textAlign    center       ctx textBaseline    bottom       this data datasets forEach function  dataset            for  var i   0  i  lt  dataset data length  i                  var model   dataset  meta Object keys dataset  meta  0   data i   model              ctx fillText dataset data i   model x  model y - 5

[javascript] how to display data values on Chart.js

Examples related to javascript

Examples related to chart.js