score:0
Here is a sample of what you're looking for...
http://codepen.io/anon/pen/PWgeqx
In my experience you'll need a div with a height and width defined to wrap the canvas. I believe you get the responsive for free. Code below.
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July", "August"],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(220,220,220,0.5)",
borderColor: "rgba(220,220,220,0.8)",
hoverBackgroundColor: "rgba(220,220,220,0.75)",
hoverBorderColor: "rgba(220,220,220,1)",
borderWidth: 5,
data: [65, 59, 80, 81, 56, 55, 40, -30]
},
{
label: "My Second dataset",
backgroundColor: "rgba(151,187,205,0.5)",
borderColor: "rgba(151,187,205,0.8)",
hoverBackgroundColor: "rgba(151,187,205,0.75)",
hoverBorderColor: "rgba(151,187,205,1)",
borderWidth: 5,
data: [28, 48, 40, 19, 86, 27, 90, -42]
}
]
},
options: {
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: false,
min: -50
}
}]
}
}
});
Here's a link to the Chart.js documentation. The Bar and Scales sections will be helpful. http://www.chartjs.org/docs/
Source: stackoverflow.com
Related Query
- Updating Chartjs to 2.5 with custom code
- Custom Legend with ChartJS v2.0
- Updating chartJS with dynamic data
- ChartJS - Custom tooltip with icon
- Chartjs not working with d3 from csv source
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- Chartjs Custom Legend with Time on Y-axis
- Angular 6: chartjs value not updating with dynamic value update
- How to set Custom tooltip event with Chartjs version 2.X
- Updating Chartjs with new data
- ChartJS 3.7 data not dynamically updating with data streaming into CSV
- My Chartjs is not updating after setstate full code attached Reactjs Update
- Updating Chartjs Data with Response from POST Call?
- Chartjs random colors for each part of pie chart with data dynamically from database
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- ChartJS - Draw chart with label by month, data by day
- Display line chart with connected dots using chartJS
- react-chartjs-2 with chartJs 3: Error "arc" is not a registered element
- chartjs : how to set custom scale in bar chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Show bar with zero value in ChartJs v2
- Chartjs linechart with only one point - how to center
- How to fix chart Legends width-height with overflow scroll in ChartJS
- ChartJS - Donut charts with multiple rings
- ChartJs custom tooltip position
- custom tooltips with react-chartjs-2 library
- Chartjs v2 xAxes label overlap with scaleLabel
- ChartJS bar chart with legend which corresponds to each bar
- ChartJS with AngularJS - Canvas won't display anything
- Vuejs with ChartJS populate from API
More Query from same tag
- Hiding labels on y axis in Chart.js
- Cannot rotate label in chart js annotations plugin
- issue with legend boxes in ChartJS
- Make arbitrary line dashed
- ChartJS - Highlight grouped bars
- function returns undefined in AngularJS
- Chart.js returns a console error and does not display the chart when using variables as data input
- Import Financial chartjs
- Comparison between d3.js and chart.js (only for charts)
- How to implement chart.js in Angular2
- How can I make streaming chart with react?
- How to show different tooltips on charts (in columns)?
- Plotting Dashed Vertical and Horizontal lines on line graph for single point
- Chart.js piechart, only have border on the outside of arc
- Min value of chart (Chart.js)
- Two chart for the same set of data - Chart.js
- How to use Chart.js with Typescript without getting assignable errors?
- How to get the bands to implement in Chart.js the band extension?
- Setting dynamic state data in Chart.JS + React
- How do I customize y-axis labels on a Chart.js line chart?
- Change Vertical Line and Color bar chart in bar chart.js
- How to handle epic long text at y-axis for angular-chart.js?
- Chartjs doc examples are lightning fast but same code is slow when reproducing
- How to wrap X axis labels to multi-lines (X axis label formatting) in ng2-Charts?
- Displaying a chart using Chart.js
- Chart.js: Combined Line and Bar Data
- Chartjs bar dataset label not showing
- Can't apply options of datalabels chartjs plugin in Vue
- Chartjs: I only want left and right padding in pie chart
- Chart.js with Angular component - Type 'string' is not assignable to type 'ChartTitleOptions | undefined'