score:2
Accepted answer
Here is an example of what you can do using annotation plugin and custom drawing on canvas:
var data_set = [{x: 1, y: 12}, {x: 2, y: 3}, {x: 3, y: 2}, {x: 4, y: 1}, {x: 5, y: 8}, {x: 6, y: 8}, {x: 7, y: 2}, {x: 8, y: 2}, {x: 9, y: 3}, {x: 10, y: 5}, {x: 11, y: 11}, {x: 12, y: 1}];
var labels = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
var lines = [], id = 0;
var linesOn = false;
var data = {
labels: labels,
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(5,215,2,0.2)",
borderColor: "rgba(5,215,2,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(5,215,2,0.4)",
hoverBorderColor: "rgba(5,215,2,1)",
data: data_set,
}]
};
addLine(7);
var option = {
legend: false,
title: {
display: true,
},
annotation: {
drawTime: "afterDraw",
annotations: lines
},
scales: {
xAxes: [{
id: 'x-axis',
type: 'linear',
position: 'bottom',
ticks: {
max: 12,
min: 1,
stepSize: 1,
callback: function(value, index, values) {
return data.labels[index];
}
}
}],
yAxes: [{
id: 'y-axis',
type: 'linear',
}],
},
animation: {
duration: 1,
onComplete: function () {
var ctx = this.chart.ctx;
console.log("onComplete", this,Chart.defaults.global)
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
var line = this.chart.annotation.elements.line1,
x = line._model.x1-15,
y = line._model.y1+5;
ctx.fillStyle = line.options.label.fontColor;
ctx.fillText("Y",x,y);
}
}
};
var myLineChart = Chart.Line('myChart', {
data: data,
options: option
});
function addLine(value) {
id++;
var ln = {
id: "line" + id,
type: "line",
mode: "horizontal",
scaleID: "y-axis",
value: value,
borderWidth: 2,
borderColor: "red",
label: {
enabled: false,
fontColor: "red",
}
};
lines.push(ln);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
In the example I disabled annotation label showing and added a custom label on yAxis (see animation.onComplete()
handler).
Source: stackoverflow.com
Related Query
- Chartjs: Custom text on y axis at certain level
- chartjs custom y axis values, different text for each one
- ChartJS Custom text on certain xAxis and yAxis linesS
- Chartjs - custom y axis range
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Create ticks at certain time positions on a chartjs cartesian time axis
- Custom text in tooltip and legend: ChartJs
- Updating Chartjs to 2.5 with custom code
- Custom Legend ChartJS not showing the text decoration: line through
- How to make custom text appear underneath each bar in chartjs bar chart?
- How to add custom text inside the bar and how to reduce the step size in y axis in chart js( Bar chart )
- Chart.JS custom y axis labels with text that has value
- How to set ChartJS Y axis title?
- Custom Legend with ChartJS v2.0
- Is it possible in chartjs to hide certain dataset legends?
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Chart Js change text label orientation on Ox axis
- chartjs : how to set custom scale in bar chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- chartjs datalabels change font and color of text displaying inside pie chart
- show label in tooltip but not in x axis for chartjs line chart
- ChartJs custom tooltip position
- Chartjs change the specific label color in x axis in callback function
- Chartjs 2: Multi level/hierarchical category axis in chartjs
- Chartjs 2.7.3: Set Y data at the correct X position axis
- How do I fix over limit y axis value in ChartJS
- chartjs - Drawing vertical line on integer x axis value
- ChartJs line chart - display permanent icon above some data points with text on hover
- Map event position to y axis value in chartjs line chart
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
More Query from same tag
- How to plot multiple value for one X-axis chart.js
- Declare data value dynamicaly to chart js
- "Responsive" Chart.js chart is taller than the containing window
- Angular / ng2-charts: Fetching json data in chart object showing: Cannot read property 'length' of undefined
- How to add text inside the doughnut chart using Chart.js?
- Using Chart.js in Web Worker
- Javascript not populate chart after retrieve json data
- Chart.js Labelling - Need Two Labels on Y-axis of Horizontal Bar Chart
- How to set same borderColor and backgroundColor in chartjs javascript
- Chartjs fiddle not working
- Angular 2 ng2-charts donut add horizontal line
- Chartjs 2.0 - Increase height of x-axis labels
- Chartjs pie chart not showing from dynamic data
- Chart JS Zoom Pan
- vanilla js error "cannot set property of undefined" on the chrome console
- charts.js and timestamp as readable date
- How to draw a horizontal line over bar columns in Chart.js that's started from X axis?
- Adjust font-weight in Chart.js doughnut chart
- Syntax error : Cannot use import statement outside a module in Vue2 chart js
- Vue Chart.js Doughnut Chart with rounded and spaced arcs (vue3-chart-v2)
- Using ChartJS to create a multiple grouped bar chart - see picture below
- How do I change axis, title, legend formatting on chartjs template
- Angular and CharJS - ERROR TypeError: Cannot read property '15' of undefined
- Dynamically loaded chart data not showing Chartjs React
- ChartJS v3 Migration: how to define annotation plugin?
- Chartjs duration horizontal bar chart
- Adding space to begin of xAxis ticks in chartJS
- problems with ChartJS refresh in angular component
- Disable or hide YAixs of chart in chartJs
- Cannot read property 'transition' null chartjs