You’ll have to add code in 2 places. As an example, take the doughnut. First add label info to the defaults (look at the original Chart.js code and compare with this): chart.Doughnut.defaults = { segmentShowStroke : true, segmentStrokeColor : “#fff”, segmentStrokeWidth : 2, percentageInnerCutout : 50, animation : true, animationSteps : 100, animationEasing : “easeOutBounce”, … Read more
Package: bchart Manual Example code: \documentclass[varwidth=true, border=2pt]{standalone} \usepackage{bchart} \begin{document} \begin{bchart}[step=2,max=10] \bcbar{3.4} \smallskip \bcbar{5.6} \medskip \bcbar{7.2} \bigskip \bcbar{9.9} \end{bchart} \end{document} Result: Package: pgfplots Manual: Page 81 – 89 Example code: % Source: https://tex.stackexchange.com/a/8584/5645 \documentclass[varwidth=true, border=2pt]{standalone} \usepackage{pgfplots} \begin{document} \begin{tikzpicture} \begin{axis}[ symbolic x coords={a small bar, a medium bar, a large bar}, xtick=data ] \addplot[ybar,fill=blue] coordinates { (a … Read more
Put tooltips in ‘option’ like this: options: { tooltips: { callbacks: { label: function(tooltipItem, data) { return tooltipItem.yLabel.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, ‘$&,’); } } } } Reference from https://github.com/chartjs/Chart.js/pull/160.
In chart.js@2.2.2 (haven’t tested for chart.js@2.x.x): const options = { elements: { arc: { borderWidth: 0 } } };
I pulled out the data from being defined inside of myChart that way I could pull out the max value from the dataset. Then inside of the yAxes you can set the max ticks to be the max value + 10 from your data set. This ensures that the top bars in the graph will … Read more
This disables the vertical Y axis line: options: { scales: { yAxes: [{ gridLines: { drawBorder: false, }, }] }, }, This can be combined with display to disable the vertical gridLines: xAxes: [{ gridLines: { display: false, }, }], Here’s a working example: http://codepen.io/anon/pen/xqGGaV
Select a series and look in the formula bar. The last argument is the plot order of the series. You can edit this formula just like any other, right in the formula bar. For example, select series 4, then change the 4 to a 3.
You could use the chart.js annotation plugin to easily draw lines on your chart without having to mess with rendering pixels in your canvas manually (the old approach that is giving you errors). Note, the plugin is created/supported by the same team as chart.js and is mentioned in the chart.js docs. Here is an example … Read more
angular-charts is a library I wrote for creating charts with angular and D3. It encapsulates basic charts that can be created using D3 in one angular directive. Also it offers features such as One click chart change; Auto tooltips; Auto adjustment to containers; Legends; Simple data format: only define what you on x and what … Read more