score:1
Accepted answer
problem was with your canvas id, you should pass dynamic ids to your chart.
for example:
you have to pass dynamic ids from your component to the canvas.
and you have instantiate your chart in ngafterviewinit
ie. after view gets initialized.
your chart template should be like this:
<div class="chart-container">
<canvas [id]="chartid" >{{ barchart }}</canvas>
</div>
barchart test
and in your component it should be like this:
export class barchartcomponent implements oninit {
@input() chartid:string;
barchart = [];
constructor(
) { }
ngoninit(): void {
settimeout(() => {
this.barchart = new chart(this.chartid, {
type: 'bar',
data: {
backgroundcolor: "#000000",
labels: ['4h', '4l', 'close'],
datasets: [{
label: '# of inc.',
data: [2,3,1],
bordercolor: '#000000',
backgroundcolor: "#000000",
}]
},
options: {
maintainaspectratio: false,
legend: {
display: false
},
scales: {
xaxes: [{
display: true,
gridlines: {
// display: false,
drawonchartarea: false,
zerolinecolor: '#000000',
color: '#000000',
fontstyle: "bold",
},
ticks: {
fontcolor: '#000000',
fontfamily: 'lato',
fontstyle: "bold",
precision:0
},
}],
yaxes: [{
display: true,
gridlines: {
drawonchartarea: false,
zerolinecolor: '#000000',
color: '#000000',
fontstyle: "bold",
},
ticks: {
fontcolor: '#000000',
fontfamily: 'lato',
fontstyle: "bold",
precision:0
},
}],
}
}
}, 100);
})
}
}
here is the working demo for the same. demo
Source: stackoverflow.com
Related Query
- Angular Chart.JS Only One Canvas Rendering
- How to display value of only one datapoint in line chart
- Can Chart.js combines Line Chart and Bar Chart in one canvas
- ChartsJS make number in middle for only one chart
- Chartjs.org Chart only displaying in one page
- Chart js - render images on only one dataset
- Chartjs chart with only one axis
- chart js stripline? like one from canvas
- Bar chart (chart.js) with only 2 points does not show one of the bars
- ChartJs does not render chart when binding canvas id in Angular
- VueJS + Chartjs - Chart only renders after code change
- how to show only each 15th x-labels in line chart chart.js in angular 6?
- Chart JS attempt to stacked bar chart tooltip for only one dataset
- After rendering one chart when trying to render a new one chart.js gives "Check that a complete date adapter is provided."
- How to limit chart JS hover to take only one value from each line chart when zoomed out?
- chart.js - how to draw and manage line when only one label present in chart js Linechart
- ChartJS with React: Only one value showing on time chart
- How to clear a chart from a canvas so that hover events cannot be triggered?
- Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
- line chart with {x, y} point data displays only 2 values
- Chartjs linechart with only one point - how to center
- Problem for display a chart with Chart.js and Angular
- set background color to save canvas chart
- Chart looks only grey, does not show the color - Chartjs,discordjs
- Display a limited number of labels only on X-Axis of Line Chart using Chart.js
- Remove the label and show only value in tooltips of a bar chart
- ChartJS - Line chart issue with only 1 point
- Angular 2 chart - change point radius
- how to create multiple chart on one component vue
- (Vue, ChartJS) Create gradient background for chart from child component canvas context
More Query from same tag
- Which Property do I need to edit, to change following Color?
- Is it possible in chartjs to hide certain dataset legends?
- chartJS doesn't show graphs on iphone/ipad
- polymer, using attribute data binding in the constructor functions
- Vue-chartjs not rendering chart until page resize
- Changing chart options dynamically in Chart.js
- Reduce space between ticks in horizontal bar-chart chartJS
- How to Draw Gantt chart using chart js or other libraries
- chartjs mixed type display want to set display none for some bar
- Chart.js showing nothing on canvas
- Change horizontal line chart to vertical line
- How to resize chartjs in bootstrap columns for different browsers
- Implementing ChartJs
- Using array as data in Chart.js
- Configuring a Radar Chart w/Chart.js
- Chart.js displaying each letter of label and data as a single value on chart. The data and labels provided are arrays
- How to set minimum value to Radar Chart in chart js
- How to draw the stroke behind bars in Chart.js?
- How can i retrieve and override presets chart.js option in angular selector?
- Chart.js - Creating multiple charts on one page
- chart.js with JSON Data on Same page not displaying
- ChartJS - Donut charts with multiple rings
- ChartJS: subsequent charts hide previous charts
- Customize Pie Chart Legend in chart.js
- chart.js Second hidden value for Bar Chart
- Bubble Chart in Chartjs not working
- Chart.js PolarArea Chart. Changing the labels to a 45 degree angle
- When I try to include the chart.js and angular chartjs files, I get: ReferenceError: require is not defined
- Render pie chart datasets out of 100% -- Chart.JS
- Custom tooltip on Chart.js is coming undefined