score:1
Accepted answer
the options are in the wrong place,
they should be placed after the data
object
data: {
},
options: chartoptions
you had them as part of the data object...
data: {
options: chartoptions
},
see following working snippet...
<canvas id="mychart" width="400" height="400"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.8.0/chart.min.js"></script>
<script>
var ctx = document.getelementbyid('mychart').getcontext('2d');
let chartoptions = {
responsive: true,
layout: { padding: { top: 12, left: 12, bottom: 12 } },
title: {
display: true,
text: 'chart.js line chart - cubic interpolation mode'
},
scales: {
xaxes: [{ gridlines: { color: '#22364e', borderdash: [9, 7] } }],
yaxes: [{ gridlines: { display: false } }]
},
plugins: { datalabels: { display: false } },
legend: { display: false },
elements: {
point: { radius: 5 },
line: { tension: 0.4, fill: false },
},
//tooltips: {},
hover: { mode: 'nearest', animationduration: 400 },
};
var mychart = new chart(ctx, {
type: 'line',
data: {
labels: ["fri", "sun", "wed", "thu", "fri"],
datasets: [
{
fill: false,
bordercolor: '#6ebffe',
pointbackgroundcolor: '#6ebffe',
pointbordercolor: '#8cff00',
data: [320, 325, 300, 350, 340],
}
]
},
options: chartoptions
});
</script>
Source: stackoverflow.com
Related Query
- Dynamically update the options of a chart in chartjs using Javascript
- ChartJS - radar chart options not working
- Using chart js options with react-chartjs-2 and typescript
- I am using chartjs node canvas to render a chart however the graph options are being ignored
- Chart js options not changing chart
- Trouble setting options for radar chart on Quickchart.io
- Vue-Chartjs reactive chart options passing
- Changing chart options dynamically in Chart.js
- ChartJS pie chart with simple parsing options doesn't render, only works when set as bar/line chart
- Chart.js ignore options
- Cannot change anything in chart options
- Vue Chart JS options aren't used
- what is wrong with my code ? java script chart position
- How to print a chart rendered by code
- Chart options not used with chart js
- Chart JS tick options not working for y axis
- angular chartjs line chart default options
- Update of options for PrimeNG Chart needs two calls instead of one
- VueJS + Chartjs - Chart only renders after code change
- How to store a chart.js chart options in another file in AngularJS
- How do I destroy/update Chart Data in this chart.js code example?
- Passing Global Options to line Chart in 2.1.6/Chart.js
- getting additional value fields from data source for dx.chartjs doughnut chart
- I'm trying to use chart.js in angular to create a simple bar chart but I'm getting an error as 'legend' type doesn't exist for options
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- How to make Chart JS ignore the scale between DatasSets
- Chart options in angularJs (NodeRed Charts)
- Chartjs Line chart options display increase and decrease percentage between each datapoint
- Chartjs ignore values and draw chart
- borderdash options in chart js changes my legend
More Query from same tag
- Flickering of charts and getcontext error with chartjs in the context of Vuejs
- Color by point in ChartJS.Blazor
- How to get clicked bar chart tooltip data?
- Vue.js this.$el.getContext('2d') is not a function
- Second tab doesn't show the chart . Can anybody see why?
- base chart slice color on series value?
- JS Chart: do not merge duplicate x axis labels
- Keep the Y axis fixed when the chart scrolls horizontally, regardless of DPI settings?
- Order and hide items of legend by value with Chartjs Angular
- Customize ChartJS Hover Data Format
- Howto draw horizontalBar with dynamic thickness (automatic rescale on browser window height resize) in Chart.js 2.9.3?
- ERROR TypeError: "this.canvas is undefined" | Problem with creating a chart with angular and chart.js
- ChartJS, Primeng, Gap first and end of line chart
- ChartJs works with sharepoint 2016 but not sharepoint 2013
- nnnick chart.js - Custom Tooltip on Line Chart
- Best API/code library to build a timeline/chart
- How to draw border all the way around bar element
- Is there any way to show tooltip by default (without hover pie chart) on chartjs
- ChartJS - Different color per data point
- Flask Socketio | Update and plot a chart using background tasks created by Flask Executor or ThreadPoolExecutor
- How to update a react-chartjs-2 plot using useState()
- How do I create multiple charts at the same page with angular?
- Print pie chart in chartjs
- How to send data from struts2 to a javascript function to draw a chart
- Display multiple chart.js charts using for loop in Django template
- Cannot access a variable declared outside a For loop (Javascript)
- Chart.js - graph responsivity / sizing
- Need help splitting date to new line in Doughnut Chart js
- Chart.JS - Polar area - Legend hover style and margin
- Which scenarios might make Chart.js's canvas element resize?