score:2
chart js allows an array of pointstyle
s to be supplied instead of just 1. it also allows images to be supplied in place of a preset pointer style.
var image = document.getelementbyid('source');
var options = {
type: 'line',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, -19, 3, 5, 2, 3],
borderwidth: 1,
pointstyle: ['triangle', image, 'triangle', 'triangle', 'triangle', 'triangle'],
pointradius: '10',
pointbackgroundcolor: 'red'
},
],
pointstyle: 'triangle'
},
options: {
scales: {
yaxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.3.0/chart.js"></script>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<div style="display:none;">
<img id="source" src="https://image.flaticon.com/icons/png/128/25/25224.png">
</div>
to then make this dynamic you could map the data in the datset to produce the pointerstyle
array
let pointerstyles = [12,-19,2,3,4].map(value=>{
return value >=0 ? 'triangle' : 'other-triangle'
});
console.log(pointerstyles);
Source: stackoverflow.com
Related Query
- Point Style property with Inverted Image in Line Chart.js
- line chart with {x, y} point data displays only 2 values
- How to display Line Chart dataset point labels with Chart.js?
- ChartJS - Line chart issue with only 1 point
- Chart Js update legend boxes of graph with graph line style
- angular-chart.js : issue with pointHoverBorderColor property for line chart
- Can chart.js display text associated with each point on a line chart that is permanently visible?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Display line chart with connected dots using chartJS
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chart.js - line chart with two yAxis: "TypeError: yScale is undefined"
- chartjs show dot point on hover over line chart
- Chart.js Mixed Bar and Line chart with different scales
- chart.js Line chart with different background colors for each section
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Chart.js: Line chart with partial dashed line
- Obtain max value of y axis of line chart rendered with Chart.js
- ChartJS - Line Chart with different size datasets
- Line chart with large number of labels on X axis
- ChartJS: Draw vertical line at data point on chart on mouseover
- ChartJs line chart - display permanent icon above some data points with text on hover
- Is it possible to revert x-axe values in line chart with chart.js
- Drawing line chart in chart.js with json response
- Chart.js line chart with area range
- Extending Line Chart with custom line
- Can we draw a Line Chart with both solid and dotted line in it?
- how to programmatically make a line chart point active/highlighted
- Change size of a specific point on a line chart in Chart.js
- ChartJS - how to display line chart with single element as a line? (not as a dot)
More Query from same tag
- Thicker X-Axis with Charts.js
- Send data from php to chart with ajax
- Chart.js add padding to scales
- $.function is not a function - jQuery
- Angular 2 ng2-charts doughnut text in the middle disappears on mouse hover
- Chart JS - Bubble Chart is not getting rendered when loaded Dynamically
- angular-chart error on line chart: unable to parse color
- No chart display for Chart.js and JSON data
- Chart.js Y axis label, reverse tooltip order, shorten X axis labels
- Is it possible to shorten outer labels on Radar graph using Chart.js, without affecting the other labels?
- pie chart in php with mysql data using chart.js
- How to set lower and upper bound in react react-chartjs-2?
- Getting a Chart is not defined ReferenceError with in React + React-chartjs
- Chartjs doesn't show chart properly with JSP
- Adding custom text to Bar Chart label values using Chart.js
- Changing borderDash for specific gridLines in radar chart
- Bar Chart.js doesn't show values with PHP, MySQL, AJAX
- chart.js-datalabels-plugins don't work
- Chart.js Uncaught TypeError: Cannot read properties of undefined (reading 'options')
- How to add image to chart.js tooltip?
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- How do I open a dialog on clicking a Bar in the BarChart?
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- Bar chart from Vue-chartjs doesn't render
- Chart.js 2 line charts with separate dataset labels
- Change Legend Box Outline Chart.js 2
- How to use chart.js in blazor?
- How to split a List into View in C#
- Horizontal bar with two yaxes chart js
- Making angular-chartjs responsive with UI-Grid