score:0
use the latest version of chart.js (2.7.1):
var canvas = document.getelementbyid('mychart');
var raw = [
{start: '0', end: '10', data: [{}]},
{start: '10', end: '20', data: [{},{},{}]},
{start: '20', end: '30', data: [{},{}]},
{start: '30', end: '40', data: [{},{},{},{}]},
{start: '40', end: '50', data: [{},{},{},{},{}]},
{start: '50', end: '60', data: [{},{},{},{},{},{}]},
];
var data = {
labels: raw.map((r) => '$' + r.start).concat('$' + raw[raw.length - 1].end),
datasets: [
{
backgroundcolor: ["red","orange","yellowgreen","green","violet", "rebeccapurple"],
data: raw.map((r) => r.data.length*(1.73 * math.random())),
}
]
};
function getyticks() { return [0, 10]};
function formatz(v) { return 'e' + v; };
function formaty(v) { return '$' + v + '.00'; };
var option = {
legend: {
display: false,
},
layout: {
padding: {
left: 10,
top: 10,
right: 10,
bottom: 10,
},
},
scales: {
yaxes:[{
scalelabel: {
display: true,
labelstring: 'y',
fontfamily: 'lato',
fontsize: 14,
},
ticks: {
beginatzero: true,
padding: 10,
fontfamily: 'lato',
fontsize: 14,
},
afterbuildticks: getyticks(),
gridlines: {
display: true,
color: 'rgba(50,50,50,0.2)',
zerolinecolor: 'rgba(50,50,50,0.5)',
zerolinewidth: 2,
drawticks: true,
tickmarklength: 4,
},
}],
xaxes:[{
barpercentage: 0.8,
categorypercentage: 1,
gridlines: {
display: false,
tickmarklength: 10,
color: 'rgba(50,50,50,0.1)',
drawticks: false,
offsetgridlines: false,
zerolinecolor: 'rgba(50,50,250,0.5)',
zerolinewidth: 5,
},
scalelabel: {
display: true,
labelstring: 'pages',
padding: 20,
fontfamily: 'lato',
fontsize: 14,
},
ticks: {
beginatzero: true,
callback: formatz,
fontfamily: 'lato',
fontsize: 14,
},
}]
}
};
var mybarchart = chart.bar(canvas,{
data:data,
options:option
});
#mychart {
border: 1px solid black;
}
<script src="https://unpkg.com/moment@2.14.1/min/moment.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.1/chart.js"></script>
<canvas id="mychart" width="400" height="300"></canvas>
Source: stackoverflow.com
Related Query
- Chart.js padding not working for ScaleLabel
- Charts.js - Colors for stacked bar on multi-series line/bar chart are not working
- Charts.js - Bar chart different colors for value intervals not working
- chart.js legend not working for pie chart
- Chart JS tick options not working for y axis
- Chart js padding isn't working for data labels
- show label in tooltip but not in x axis for chartjs line chart
- Time Series Line chart js in react not working
- Click event of stacked line chart not working
- ChartJS - radar chart options not working
- Bubble Chart in Chartjs not working
- Android: WebView with JavaScript for Chart.js not working properly
- Chartjs - Donut Chart label for small values not visible
- Css style not working well when resizing chart height in angular application
- code works fine on jsfiddle but one function is not working on website
- Chartjs not working with d3 from csv source
- zeroLineColor and zeroLineWidth not working for the x-axis in Chartjs
- in chart js tooltip font size is not working
- Chart JS not working with date
- 'barradius' for Barchart in ChartJS is not working
- Background color of the chart area in chartjs not working
- Chartjs with Vue, Bar Chart Border Radius not working
- Chart.js bubble chart pointStyle not working
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- Chart JS not working with Phonegap
- padding not working in my chartjs line-graph
- Problem with script src for Chart.js. The CDN for Chart.js funtions fine, so my code is ok. Somehow I'm not linking the file correctly
- ChartJS not showing data for time series bar chart
- Legend color not working with randomly generated background colors in chartjs pie chart
- Vertical align bar chart from chart.js not working
More Query from same tag
- Beginner using chart.js: having trouble display state full of data into a column chart using variables
- Trying to export chart with Chartjs and React but getting erorr
- Is it possible to define data attributes for each dataset value in a Chart.js chart?
- Bubbling mouse event to parent canvas that is of chart.js
- How can I trigger the hover mode from outside the chart with charts.js 2?
- Update Chart JS data dynamically and add new data, remove old data to create timeline "like" chart
- Chart.js Example Diagramm don't show
- Chart.js chart by passing data through the controller MVC
- Angular 2 Chart.js and NG2-Charts Not Binding Data Objects After Updates To Project
- angular-chart add horizontal line
- Chart.js - change which data the legend uses for the coloured box
- Chart.js Clipping on Top of Line Graph
- Display Chartjs tooltip values outside the canvas - multi line chart
- Chart.js turn off all y axis and toggle them on / off
- Completely hide empty bars in chart.js
- How to draw a linear regression line in Chart.js
- generator-angular-fullstack cannot add angular-chart.js
- is it possible to sum up the properties of an array of objects and to filter it according to another property?
- Chart.js Treemap Custom text
- Bar Color In Chart JS
- Parsing values from external JSON file with Chart.js
- what are the differences between 'NgChartModule' and 'chartModues'?
- applying background-color in bar chart using chart.js
- Chartjs-plugin-zoom plugin does not change x axis labels
- React + Chart.js 2.0: How to put a label inside of a doughnut chart?
- Using Chart.js 2.0, display line chart values
- Chart.js: passing objects instead of int values as data
- How to customize tooltip on mouse hover of a polar area chart of Angular Charts
- Chart.js - Right use of object array
- mysql sum query for chartjs