score:1
chart.js has evolved since this question was posted but even with the current version 2.9.4, the solution looks almost the same as the originally posted code.
the main changes are the following:
- instead of using
new chart(ctx).line(...)
, we should now usetype: 'line'
as shown here. - quite some
dataset
properties have different names. - use the option
borderdash
to draw the dashed line of the second dataset.
please take a look at your amended code and see how it works.
var ctx = document.getelementbyid("main-line-chart").getcontext("2d");
var gradient = ctx.createlineargradient(0, 0, 0, 300);
gradient.addcolorstop(0, 'rgba(40,175,250,.25)');
gradient.addcolorstop(1, 'rgba(40,175,250,0)');
var data = {
labels: ["january", "february", "march", "april", "may", "june", "july"],
datasets: [{
label: "my first dataset",
backgroundcolor: gradient,
bordercolor: "#28affa",
pointcolor: "#19283f",
pointhighlightcolor: "#28affa",
data: [65, 59, 80, 81, 56, null, null]
},
{
label: "my second dataset",
fill: false,
bordercolor: "rgba(100, 100, 100,.39)",
pointcolor: "#19283f",
pointhighlightcolor: "#28affa",
data: [null, null, null, null, 56, 27, 90],
borderdash: [10, 5]
}
]
};
var options = {};
var mylinechart = new chart(ctx, {
type: "line",
data: data,
options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.min.js"></script>
<canvas id="main-line-chart" height="100"></canvas>
Source: stackoverflow.com
Related Query
- Chart.js, dashed line, full width chart
- Chart.js: Line chart with partial dashed line
- How to dynamically set ChartJs line chart width based on dataset size?
- How to increase line chart width in ng2-charts?
- vertical grid line not taking full hight of the canvas in chart js 3.3.2
- Chart Js Line chart with fill on click with full information of its legend text
- How to decrease bottom width of triangle using line chart in chartJs?
- Limit labels number on Chart.js line chart
- Chart.js - How to set a line chart dataset as disabled on load
- chart js 2 how to set bar width
- Chart Js Change Label orientation on x-Axis for Line Charts
- Draw horizontal line on chart in chart.js on v2
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Remove the vertical line in the chart js line chart
- Moving vertical line when hovering over the chart using chart.js
- create a multi line chart using Chart.js
- How to add an on click event to my Line chart using Chart.js
- line chart with {x, y} point data displays only 2 values
- Chart.js how to show cursor pointer for labels & legends in line chart
- Chart.js: bar chart first bar and last bar not displaying in full
- Line chart disable interpolation
- Chart.js line chart set background color
- 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 is cut off at the top?
- Chart.js - line chart with two yAxis: "TypeError: yScale is undefined"
- How to display Line Chart dataset point labels with Chart.js?
- show label in tooltip but not in x axis for chartjs line chart
- chartjs show dot point on hover over line chart
- ChartJs line chart repaint glitch while hovering over
More Query from same tag
- ChartJS right Y-Axe ticks issue
- Adding custom text to Bar Chart label values using Chart.js
- Not able to see values on bar chart
- Avoid the first GridLine to be dashed on Chart JS
- In Chart.js I want to show dotted gridLines like in below image
- How to remove some points in chartjs
- Custom labeling/fixed range on x-axis in Chart.js for horizontal bar chart?
- Put chart.js chart inside JQuery tooltip?
- time series stream, removing am/pm on x axis and 24 hour format
- Chart.js Fill line chart from another value than 0
- Updating Chartjs to 2.5 with custom code
- How to create dynamic D3 tickFormat in dc charts
- Chart.js time scale graph - xAxis labelling
- How to handle epic long text at y-axis for angular-chart.js?
- How can I rotate a pie chart in charts.js?
- Hide labels from pie chart in chartjs
- Tick label overlaps axis label
- chartjs Line chart: scale respect value on x-axis
- Chart.js annotations in Vue.js break when defined in data ()
- destroy multiple charts on same page
- ChartJs line chart repaint glitch while hovering over
- Series Details Not Showing in Angular Chart with Charts.js
- Chart in Angular not displayed until windows resize
- chartjs height does not follow parent container
- Dynamically updating Chart.js data in angular
- How to render tooltip text on a different div with Chart.JS
- How do I change the colour of a Chart.js line when drawn above/below an arbitary value?
- How to remove bars for those bars with zero value in Chartjs bar chart?
- React chartjs 2 - Type 'string' is not assignable to type '"timeseries"'
- Missing Tooltip for some data points using chartjs