No need to use legendCallback function. You can set usePointStyle = true to turn that rectangle into a circle. Chart.defaults.global.legend.labels.usePointStyle = true; var ctx = document.getElementById(“myChart”).getContext(“2d”); var myChart = new Chart(ctx, { type: ‘line’, data: { labels: [“Red”, “Blue”, “Yellow”, “Green”, “Purple”, “Orange”], datasets: [{ label: ‘Link One’, data: [1, 2, 3, 2, 1, 1.5, … Read more
You would have to set the pointRadius property to 1 as well (so the point becomes small initially), along with the pointHoverRadius (remains small on hover) pointRadius: 1, pointHoverRadius: 1
You should create a separate array for colors ( just like the ict_unit and efficiency ), instead of assigning a random color value each time to the coloR variable. Here is the revised version of your code : $(document).ready(function() { $.ajax({ url: “https://jsonblob.com/api/jsonBlob/a7176bce-84e0-11e7-8b99-016f34757045”, method: “GET”, success: function(data) { console.log(data); var ict_unit = []; var efficiency … Read more
You need to set barPercentage and categoryPercentage to 1.0 on the x-axis scale. Add this to your options object: var options = { … scales: { xAxes: [{ categoryPercentage: 1.0, barPercentage: 1.0 }] } }; See http://www.chartjs.org/docs/#bar-chart-chart-options
Chart.js is treeshakable since chart.js V3 so you will need to import and register all elements you are using. import {Chart, ArcElement} from ‘chart.js’ Chart.register(ArcElement); For all available imports and ways of registering the components you can read the normal chart.js documentation
If you don’t want to show point value (e.g. 0.5) labels you could write a callback function to filter the point value labels instead of using stepSize. Like this: ticks: { min: 0, // it is for ignoring negative step. beginAtZero: true, callback: function(value, index, values) { if (Math.floor(value) === value) { return value; } … Read more
You need to install and import an adapter, in your case it’s moment adapter for time series npm install moment chartjs-adapter-moment –save then import it in your component: import ‘chartjs-adapter-moment’; for more info about adapters, check this
In updating to version 2.2.2 of ChartJS, I found that the accepted answer no longer works. The datasets will take an array holding styling information for the properties. In this case: var pointBackgroundColors = []; var myChart = new Chart($(‘#myChart’).get(0).getContext(‘2d’), { type: ‘line’, data: { datasets: [ { data: dataPoints, pointBackgroundColor: pointBackgroundColors } ] } … Read more
You need to set the option maintainAspectRatio to false …. new Chart(ctx).Line(data, { responsive:true, maintainAspectRatio: false }); Fiddle – https://jsfiddle.net/3cxeyLc8/