score:3
Accepted answer
if you want to have the tooltip of the same color as your legend, you need to modify the pointcolor
options.
find my fiddle ;).
var randomscalingfactor = function(){ return math.round(math.random()*100)};
var linechartdata = {
labels : ["january","february","march","april","may","june","july"],
datasets : [
{
label: "my first dataset",
fillcolor : "rgba(255, 0, 0, 0.0)",//"rgba(220,220,220,0.2)",
strokecolor : "red",//"rgba(220,220,220,1)",
pointcolor : "red",//"rgba(220,220,220,1)",
pointstrokecolor : "#fff",
pointhighlightfill : "#fff",
pointhighlightstroke : "rgba(220,220,220,1)",
data : [randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor()]
},
{
label: "my second dataset",
fillcolor : "rgba(0, 0, 255, 0.0)",//"rgba(151,187,205,0.2)",
strokecolor : "blue",//"rgba(151,187,205,1)",
pointcolor : "blue",//"rgba(151,187,205,1)",
pointstrokecolor : "#fff",
pointhighlightfill : "#fff",
pointhighlightstroke : "rgba(151,187,205,1)",
data : [randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor()]
},
{
label: "my third dataset",
fillcolor : "rgba(0, 255, 0, 0.0)",//"rgba(100,100,205,0.2)",
strokecolor : "green",//"rgba(151,187,205,1)",
pointcolor : "green",//"rgba(151,187,205,1)",
pointstrokecolor : "#fff",
pointhighlightfill : "#fff",
pointhighlightstroke : "rgba(151,187,205,1)",
data : [randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor()]
}
]
}
var ctx = document.getelementbyid("canvas").getcontext("2d");
window.myline = new chart(ctx).line(linechartdata, {
legendtemplate : "<ul class=\"<%=name.tolowercase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokecolor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
beziercurve: false,
multitooltiptemplate: "<%= datasetlabel %> - <%= value %>",
});
var legend = myline.generatelegend();
document.getelementbyid("legend").innerhtml = legend;
Source: stackoverflow.com
Related Query
- how to set color for each item in tooltip with ChartJS
- How to set a full length background color for each bar in chartjs bar
- How to use set the color for each bar in a bar chart using chartjs?
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- how to set color for each datapoint in chartjs-chart-treemap
- How to set X coordinate for each bar with react chart js 2?
- How to set min max for x axis depend on data with Chartjs and Spring Boot?
- How to set Custom tooltip event with Chartjs version 2.X
- Charts.js - How to set custom tooltip text for each dataset
- How to set default callback for tooltip title with chart.js
- Set different color for each bars using ChartJS in Angular 4
- How to set specific height for chartJs background color in terms of yAxis value
- how to create bar chart with group and sam color for each group using chart.js?
- Different color for each bar in a bar chart; ChartJS
- Chartjs random colors for each part of pie chart with data dynamically from database
- How to disable a tooltip for a specific dataset in ChartJS
- Gradient color for each bar in a bar graph using ChartJS
- how to set chart.js grid color for line chart
- Chart.js how to set cutoutPercentages for each dataset
- How to set single color on each bar in angular chart js
- How to remove bars for those bars with zero value in Chartjs bar chart?
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- ChartJS How to set max labels for X axis?
- How to set colors for Chart.js tooltip labels
- How to wait for all items to load within ng-repeat before then rendering a chart for each item
- How to apply to different bground color for each area in Chart.js
- How to set vertical lines for new day on x-axis in ChartJS v3.x
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- How to set ChartJS Axis label with PrimeFaces
- How to write better code in es6 for formatting an object with array values
More Query from same tag
- findOne returns undefined in onRendered
- Displaying ChartJS tooltip on mouseover of bar/line
- Is it possible to generate multiple chart in Laravel using chartjs ? If possible please give the solution
- Add mouseout event handler to legends in Chart.js
- hide label on doughnut chart of chartjs
- ChartJS 2.0 - Huddle labels on pie chart
- How to disable chartjs legendclick
- Chart.js - Creating Custom Chart Types
- How to show 2 populations types in one bar using chartjs?
- Plotting firebase data to ChartJS
- Why tooltip position absolute does not apply using js?
- Legend not displaying on Line or Bar chart - React-Chartjs-2
- Chart js nested pie label colors in legend
- Updating Chartjs to 2.5 with custom code
- Getting String array from node js to ejs
- Make arbitrary line dashed
- How to fit Doughnut Chart JS into Bootstrap column?
- A chart Js error issue are occured in my Laravel other page?
- How to make pie chart from array values?
- ChartJs does not render chart when binding canvas id in Angular
- Chartkick cumulative chart by date never descending
- how can i reset chartjs object all instances and recreate it from scratch?
- How do I get the current step size of a chartjs chart whose stepSize I have not defined?
- ChartJS 2.7.0 updating and exporting as png
- Chartjs: How do you toggle the visibility of charts in Ionic 4
- vue.js vue-chartjs chart not updating when chartData replaced, updated etc
- 'filter' function for chart.js legend labels never being called
- How can I automatically wrap tooltip text content to multiple lines?
- How can i move a point through both x-axis and y-axis while the curve is not changed in a chart.js line graph?
- ng2-charts update labels and data