chart.js

问题 I'm using latest chart.js library to generate a line chart without scales, but there is a padding problem and top and bottom points are cut off. I couldn't see any option for padding canvas. My config is like below. var config = { type: 'line', data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "Sales", data: [10, 20, 50, 25, 60, 12, 48], fill: true, lineTension: 0.25, borderColor: "#558aeb", backgroundColor: "#558aeb" }] }, options: {

问题 Following the Chart.js documentation I am trying to draw a small chart: <canvas id="myChart" width="400" height="400"></canvas> <script> var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'line', data: { labels:['15-2016','16-2016','17-2016',], datasets:[ { label:'Yes', data:[3.4884,1.1628,1.3514,], backgroundColor:'rgba(75,192,192,1)', borderColor:'rgba(75,192,192,1)', pointRadius:0 }, { label:'Maybe', data:[0.5571,1.3298,0.791,], backgroundColor:'rgba(255,206

问题 Following the Chart.js documentation I am trying to draw a small chart: <canvas id="myChart" width="400" height="400"></canvas> <script> var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'line', data: { labels:['15-2016','16-2016','17-2016',], datasets:[ { label:'Yes', data:[3.4884,1.1628,1.3514,], backgroundColor:'rgba(75,192,192,1)', borderColor:'rgba(75,192,192,1)', pointRadius:0 }, { label:'Maybe', data:[0.5571,1.3298,0.791,], backgroundColor:'rgba(255,206

问题 I'm making a chart with chart.js and I'm trying to figure out how I can change the label/legend styling. I want to remove the rectangle part and instead use a circle. I've read that you can make your custom legend (using legendCallback), but for the life of me I cannot figure out how to do it. This is how my chart looks now - image. This is my HTML: <div class="container"> <canvas id="myChart"></canvas> </div> And this is my JS: var ctx = document.getElementById("myChart"); var myChart = new

问题 I am creating a bar chart like so: var ctxForecastChart = $("#forecastLineChart").get(0).getContext("2d"); var forecastChartData = { labels: [ "Total Sales" ], datasets: [ { label: "8/28/2016 - 9/3/2016", backgroundColor: "rgba(255,0,0,0.75)", hoverBackgroundColor: "rgba(255,0,0,1)", data: [240] }, { label: "9/25/2016 - 10/2/2016", backgroundColor: "rgba(255,153,0,0.75)", hoverBackgroundColor: "rgba(255,153,0,1)", data: [272] }, { label: "9/18/2016 - 9/24/2016", backgroundColor: "rgba(255,255

问题 I have been trying many ways to push the collection of array into the dataset. Anyone can help me to push an array into stacked chart based on the codepen below? Here's the example Codepen stacked bar Javascript const getData = ()=>new Array(7).fill('').map(v=>randomScalingFactor()); var barChartData = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'Dataset 1', backgroundColor: window.chartColors.red, data: getData() }, { label: 'Dataset 2',

问题 I'm trying to make a line chart using Chart.js. My data is of the form: var result = [{x:"18:00",y:"230"},{x:"19:00",y:"232"},{x:"20:00",y:"236"},{x:"22:00",y:"228"}]; Where x represents the time with hours and minutes. I fed the data like this var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00"

问题 I want to align the y-axis tick labels above the ticks in chartJS. Here's what I've got so far: I want the tick labels 0M , 20M , and 40M above the tick labels. Something like this: Here's my chart config: new Chart(ctx, { type: 'bar', data, options: { ... scales: { xAxes: [{ ... }], yAxes: [{ stacked: true, position: 'right', gridLines: { drawBorder: false }, ticks: { maxTicksLimit: 3 } }] } } }) I'm not able to find any option in the chart options to do such a thing. Please help 回答1: You

问题 I'm using https://valor-software.com/ng2-charts/ for generating following chart. Expected Graph Actual Graph Right now what I have achieved is following. 1.) How to customize the position of X axis labels as above displayed in Graph #1 ? 2.) Also regarding displaying the value percentages on top of each bar, https://github.com/valor-software/ng2-charts/issues/662 post helped however works only if mouse hover over the bar. Any solution so that data remains on the bar even if tooltip is

问题 While using the chart.js and the plugin chartjs-plugin-annotation, annotations are not showing while using angular 5, no error messages are displayed. I have created a cut down example of code that exhibits the problem console.log(Chart.plugins) shows the plugin looks to be registered as plugin[3] however it doesn't have an id as the inbuilt ones do, is this a problem? chart.component.ts import { Component, Inject } from '@angular/core'; import { Chart } from 'chart.js'; import 'chartjs