score:0
Accepted answer
so far i understood you are looking for line-styles chart, actually, it's a line chart with some styles.
here is your update html
<div class="report-card">
<p class="text-center p-t-20 text-muted">monthly expenses</p>
<canvas id="line_chart" height="150"></canvas>
</div>
<div class="report-card">
<p class="text-center p-t-20 text-muted">monthly expenses</p>
<canvas id="bar_chart" height="150"></canvas>
</div>
<div class="report-card">
<p class="text-center p-t-20 text-muted">monthly expenses</p>
<canvas id="line_styles_chart" height="150"></canvas>
</div>
and the script.js file
$(function () {
new chart(document.getelementbyid("line_chart").getcontext("2d"), getchartjs('line'));
new chart(document.getelementbyid("bar_chart").getcontext("2d"), getchartjs('bar'));
new chart(document.getelementbyid("line_styles_chart").getcontext("2d"), getchartjs('line-styles'));
});
function getchartjs(type) {
var config = null;
if (type === 'line') {
config = {
type: 'line',
data: {
labels: ["groceries", "rent", "utilities", "student loans", "car payment"],
datasets: [{
label: "refund",
data: [65, 59, 80, 45, 56],
bordercolor: 'rgba(0, 188, 212, 0.75)',
backgroundcolor: 'rgba(0, 188, 212, 0.3)',
pointbordercolor: 'rgba(0, 188, 212, 0)',
pointbackgroundcolor: 'rgba(0, 188, 212, 0.9)',
pointborderwidth: 1
}
]
},
options: {
responsive: true,
legend: false
}
}
}
else if (type === 'bar') {
config = {
type: 'bar',
data: {
labels: ["gas bill", "light bill", "rent", "cell phone bill", "water bill", "groceries", "spotify"],
datasets: [{
label: "my first dataset",
data: [65, 59, 80, 81, 56, 55, 40],
backgroundcolor: 'rgba(0, 188, 212, 0.8)'
}, {
label: "my second dataset",
data: [28, 48, 40, 19, 86, 27, 90],
backgroundcolor: 'rgba(233, 30, 99, 0.8)'
}]
},
options: {
responsive: true,
legend: false
}
}
}
else if (type === 'line-styles') {
var config = {
type: 'line',
data: {
labels: ['january', 'february', 'march'],
datasets: [{
label: 'gas bill',
fill: false,
backgroundcolor: 'rgba(0, 188, 212, 0.8)',
bordercolor: 'rgb(54, 162, 235)',
data: [0, 42, 55],
}, {
label: 'light bill',
fill: false,
backgroundcolor: 'rgba(233, 30, 99, 0.8)',
bordercolor: 'rgb(75, 192, 192)',
borderdash: [5, 5],
data: [28, 48, 40],
}, {
label: 'rent',
backgroundcolor: 'rgba(255, 209, 0, 0.8)',
bordercolor: 'rgb(255, 205, 86)',
data: [40, 27, 90],
fill: true,
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'line styles chart'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xaxes: [{
display: true,
scalelabel: {
display: true,
labelstring: 'month'
}
}],
yaxes: [{
display: true,
scalelabel: {
display: true,
labelstring: 'value'
}
}]
}
}
};
}
return config;
}
Source: stackoverflow.com
Related Query
- Displaying Charts in C# using ChartJS
- Chart.js - displaying multiple line charts using multiple labels
- ChartJS not displaying time data using Moment.js
- How to generate chartjs charts to pdf using laravel?
- Creating charts dynamically using ChartJS and AngularJS
- Can i use crosshairs with OHLC/candlestick charts using ChartJS
- Displaying Legend only once when Several pie charts are drawn in the same page using chart.js
- How to run Chart.js samples using source code
- i want display chart based on selected charts using chartJS
- ChartJS Line Charts - remove color underneath lines
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Displaying JSON data in Chartjs
- How to modify bar width in Chartjs 2 bar charts
- ChartJS canvas not displaying rgba colors in IE, Safari and Firefox
- Display line chart with connected dots using chartJS
- Dynamically update the options of a chart in chartjs using Javascript
- chartjs datalabels change font and color of text displaying inside pie chart
- How to save Chart JS charts as image without black background using blobs and filesaver?
- ChartJS - Donut charts with multiple rings
- How to add images as labels to Canvas Charts using chart.js
- chartjs + Angular6 is not showing charts or any error
- Change point color on click using ChartJS
- ChartJS Doughnut Charts Gradient Fill
- TypeError: Cannot read property 'defaults' of undefined when using the react wrapper of chartjs
- How to zoom charts in chart.js using angular 7
- Why are these 2.9 ChartJS bar charts different?
- How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?
- Chartjs - show elements in all datasets on hover using bar chart
- Exporting chart.js charts to svg using canvas2svg.js
- Chartjs Nested Pie/Doughnut charts
More Query from same tag
- Chart.js - IndexSizeError: Index or size is negative or greater than the allowed amount
- Charts flickering
- Angular with ng2charts for bar chart shows NAN% when no data present
- Show 'No data' in Pie when there is no data using VueJS and ChartJS?
- ng2-charts doughnut chart with different data per series
- Chart.JS plugin, draw after animation
- using ajax populate dynamic piechart from chartjs
- Charts js and laravel: Render chart after passing in json data
- ChartsJS Legend not showing in Angular11
- Chart.js legend text showing undefined
- Vue.js - this.<value>.<value> is undefined
- Is there a JavaScript Method/ Function to loop Objects via Keys into a array?
- How to filter shadow or Drop Shadow in Chart.js?
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- How to set dynamic value for horizontal line in annotation plugin for Chart.js
- How to increase gaps between vertical gridlines in chartjs
- Chart.js category y-axis line chart
- Ionic/Chart.js - Cannot read property 'nativeElement' of undefined
- Chart.js two columns on page - left column is squished until page resize
- Failed to create chart
- How to achive Chart JS weather chart of 5 day / 3 hour forecast data
- Chart.js boxplot: adding additional reference value?
- create a chart.js point dataset from json
- Grouped Bar Chart from mySQL database using ChartJS and PHP
- Is it possible to avoid the shrinking of Chart.js pie charts when accompanied by labels?
- How to remove a vertical line from the canvas of react-chartjs-2?
- How to remove excess lines on X axis using chartjs?
- Chart.js doughnut chart isn't showing tooltip when you hover over the left/right of the doughnut
- How to format the left legend on chartjs
- ChartJS does not display the legend