score:2
few things wrong with your code:
- legend namespace was in v2 place instead of v3, in v3 it has been moved to
options.plugins.legend
- scales where defined as arrays which is v2 syntax, in v3 all scales are their own object where the scale id is the object key
backgroundcolorhover
is not a valid property, you should use thehoverbackgroundcolor
to define that color, also to make it the same color on hover you shouldnt define it asnull
but instead define it as the same color.- the
beginatzero
is not defined in the ticks but on the root of the scale now, but since it does nothing on a category scale i have removed it.
for all changes between v2 and v3 you can read the migration guide
since scale config now works to make it more clean you can remove all the unecesarry stacks in each dataset, also you dont have to specify that its a bar dataset since the default type takes care of that. you only need to specify it if you are deviating from it.
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.5.1/chart.min.js"></script>
<!doctype html>
<html>
<head>
<title>bar chart</title>
<script src="chart.min.js"></script>
<meta name="viewport" content="initial-scale = 1, user-scalable = no" />
<style>
canvas {}
</style>
</head>
<body>
<canvas id="canvas" height="450" width="600"></canvas>
<script>
var model = {
"type": "bar",
"data": {
"labels": [
"sob - base case",
"sob simulated product"
],
"datasets": [{
"label": "1 drop only: 1 active ingredient only",
"backgroundcolor": [
"#a76fde"
],
"data": [
0.0364,
0.0911
],
"hoverbackgroundcolor": "#a76fde"
},
{
"label": "1 fixed dose drop combination only",
"backgroundcolor": [
"#caa9eb"
],
"data": [
0.0189,
0.0517
],
"hoverbackgroundcolor": "#caa9eb"
},
{
"label": "multiple drops only, excluding fixed dose combinations only",
"backgroundcolor": [
"#b4c12f"
],
"data": [
0.025,
0.0487
],
"hoverbackgroundcolor": "#b4c12f"
},
{
"label": "selective laser trabeculoplasty (slt)",
"backgroundcolor": [
"#002060"
],
"data": [
0.0121,
0.0293
],
"hoverbackgroundcolor": "#002060"
},
{
"label": "other laser treatments for glaucoma",
"backgroundcolor": [
"#009999"
],
"data": [
0.0025,
0.0071
],
"hoverbackgroundcolor": "#009999"
},
{
"label": "migs",
"backgroundcolor": [
"#da1884"
],
"data": [
0.0004,
0.0109
],
"hoverbackgroundcolor": "#da1884"
},
{
"label": "traditional incisional surgery",
"backgroundcolor": [
"#fdc741"
],
"data": [
0,
0.0095
],
"hoverbackgroundcolor": "#fdc741"
}
]
},
"options": {
"scales": {
"x": {
"stacked": true,
"ticks": {
"maxrotation": 0,
"minrotation": 0
}
},
"y": {
"stacked": true
}
},
"responsive": true,
"plugins": {
"legend": {
"display": true,
"position": "right",
"align": "start"
}
}
}
}
new chart(document.getelementbyid("canvas").getcontext("2d"), model);
</script>
</body>
</html>
score:-1
you need to wrap legend
inside of plugins
see example (click the actions tab to see how they adjust the legend position) or this example where it is explicitly written in the config
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.5.1/chart.min.js"></script>
<!doctype html>
<html>
<head>
<title>bar chart</title>
<script src="chart.min.js"></script>
<meta name="viewport" content="initial-scale = 1, user-scalable = no" />
<style>
canvas {}
</style>
</head>
<body>
<canvas id="canvas" height="450" width="600"></canvas>
<script>
var model = {
"type": "bar",
"data": {
"labels": [
"sob - base case",
"sob simulated product"
],
"datasets": [
{
"label": "1 drop only: 1 active ingredient only",
"type": "bar",
"stack": null,
"backgroundcolor": [
"#a76fde"
],
"data": [
0.0364,
0.0911
],
"backgroundcolorhover": null
},
{
"label": "1 fixed dose drop combination only",
"type": "bar",
"stack": null,
"backgroundcolor": [
"#caa9eb"
],
"data": [
0.0189,
0.0517
],
"backgroundcolorhover": null
},
{
"label": "multiple drops only, excluding fixed dose combinations only",
"type": "bar",
"stack": null,
"backgroundcolor": [
"#b4c12f"
],
"data": [
0.025,
0.0487
],
"backgroundcolorhover": null
},
{
"label": "selective laser trabeculoplasty (slt)",
"type": "bar",
"stack": null,
"backgroundcolor": [
"#002060"
],
"data": [
0.0121,
0.0293
],
"backgroundcolorhover": null
},
{
"label": "other laser treatments for glaucoma",
"type": "bar",
"stack": null,
"backgroundcolor": [
"#009999"
],
"data": [
0.0025,
0.0071
],
"backgroundcolorhover": null
},
{
"label": "migs",
"type": "bar",
"stack": null,
"backgroundcolor": [
"#da1884"
],
"data": [
0.0004,
0.0109
],
"backgroundcolorhover": null
},
{
"label": "traditional incisional surgery",
"type": "bar",
"stack": null,
"backgroundcolor": [
"#fdc741"
],
"data": [
0,
0.0095
],
"backgroundcolorhover": null
}
]
},
"options": {
"scales": {
"xaxes": [
{
"stacked": true,
"ticks": {
"beginatzero": true,
"maxrotation": 0,
"minrotation": 0
}
}
],
"yaxes": [
{
"stacked": true
}
]
},
"responsive": true,
"plugins": {
"legend": {
"align": "start",
"position": "right"
}
}
}
}
new chart(document.getelementbyid("canvas").getcontext("2d"), model);
</script>
</body>
</html>
Source: stackoverflow.com
Related Query
- what is wrong with my code ? java script chart position
- chart js how to fill legend box with colour
- ChartJS bar chart with legend which corresponds to each bar
- Chart.js HTML custom legend issues with doughnut chart
- Increase padding between legend and chart with react-chartjs-2
- Angular chart how to show the legend data value by default along with legend name
- Chart Js update legend boxes of graph with graph line style
- Legend isnt moving to the right on my doughnut chart created with chart.js
- Chart Js Line chart with fill on click with full information of its legend text
- Legend color not working with randomly generated background colors in chartjs pie chart
- Modify the legend of a double doughnut with chart js
- Legend position is not vertically in middle in Donut chart
- Position of the x-axis labels is not in sync with the line chart data points
- chartjs bar chart align the legend to left position
- How to add a coloured legend box to a pie chart with Chart.js v1?
- Legend position with Chart.js
- Custom Legend with ChartJS v2.0
- Chart.js - Increase spacing between legend and chart
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Chartjs random colors for each part of pie chart with data dynamically from database
- Pie Chart Legend - Chart.js
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- How to prevent first/last bars from being cut off in a chart with time scale
- ChartJS - Draw chart with label by month, data by day
- Horizontal stacked bar chart with chart.js
- Change legend position of ng-charts (using angular2)
- line chart with {x, y} point data displays only 2 values
- Vertical stacked bar chart with chart.js
- Display line chart with connected dots using chartJS
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
More Query from same tag
- Chart.js tooltip yAlign
- Chart js multiple titles
- ChartJS on small screen
- How I can prevent of labels overlapping on mobile screen Chart.js
- how to add legend in pie chart
- how to show bar value on the top of each bar in chartjs
- Reading converted rss to json file with chart.js not working
- How to draw the X-axis (line at Y = 0) in Chart.js?
- Trigger axispointer function on existing chart js via console
- How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?
- How do I use ChartJS with a background color in the space between two line charts?
- Test a Chart.js canvas with Protractor
- chart.js fixed bar width issue
- Using JSON file data in Chart.js
- Render labels only when the data is available for a particular label
- Jinja throughs "SyntaxError: expected property name, got '%' " error
- How to commaize the data values provided to a chart in Chart.JS?
- Why don't my datasets show up on line graph using Chart.js?
- angular-chart.js not rendering any chart
- Chart.js not displaying on Android Webview if animation is set to false
- ChartJS 3+ x-axis only showing full moment object instead of just month
- Angular PrimeNG Chart Module: Customize hover text
- How to decrease bottom width of triangle using line chart in chartJs?
- Printing a list by clicking chart Chart js + react
- Chartjs: Rotate Axis Title
- How to save in chart original ID of element in array that is used to build chart data labels?
- ChartJS: how to make a bar chart with a horizontal guideline:
- How to cut line graph in ChartJS
- chart.js time x-axis - start ticks at specific time
- How to Modify ToolTips in Yii2 using dosamigos\chartjs\ChartJs?