score:1
Accepted answer
you can do this by hooking into the draw
function of the first point (because you are basically closing off the path drawn by the line to do the fill) and using the y = 0 points to close off the path, like so.
chart.types.line.extend({
name: "linealt",
initialize: function (data) {
chart.types.line.prototype.initialize.apply(this, arguments);
var scale = this.scale;
var firstdataset = this.datasets[0];
var firstpoint = firstdataset.points[0];
var min = (scale.min > 0 ? scale.min : (scale.max > 0 ? 0 : scale.max));
originaldraw = firstpoint.draw;
firstpoint.draw = function () {
ctx.lineto(firstdataset.points[firstdataset.points.length - 1].x, scale.calculatey(min));
ctx.lineto(firstdataset.points[0].x, scale.calculatey(min));
ctx.fillstyle = firstdataset.fillcolor;
ctx.closepath();
ctx.fill();
return originaldraw.apply(this, arguments);
}
}
});
and you also have to turn off the datasetfill option (since we are doing it on our own)
var mychart = new chart(ctx).linealt(data, {
datasetfill: false
});
if you also want to move the x axis labels, the cleanest way to do it would be to turn off the current labels and just draw your own using the xlabels
collection
fiddle - http://jsfiddle.net/dnpo61tu/
Source: stackoverflow.com
Related Query
- Have shading begin at 0 but not scale
- code works fine on jsfiddle but one function is not working on website
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- I have a chart but it is not updating the chart with react chart-js-2
- Error: "category" is not a registered scale
- TimeSeries scale in ChartJS 3.0.2. brings error "This method is not implemented: either no adapter can be found or an incomplete integration was ..."
- show label in tooltip but not in x axis for chartjs line chart
- chart.js not allowing y axis steps with logarithmic scale
- Bootstrap modal showing when clicking individual points in Linechart but not in individual bars in Barchart
- ChartJS -- How do I change scale color when I have to scales?
- react-chartjs-2 time scale dates not formatting
- Chart.js time scale not showing data
- Why is the child component updating but not re-render Reactjs
- Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale
- How do I add padding on the right of tooltip, but not the left in Chart.js?
- ChartJS shows date, but not time, when displaying labels in time axis
- Chartjs show labels but not ticks
- Chartjs not working with d3 from csv source
- I have 10 points inn x-axis, ranging [-25,-20,,-15,-10,0,10,20,30,40,50]. But I want my line chart to start from -15 of x-axis. How we can achieve?
- Chartjs 2.0 alpha, how to have a static scale for y-axis
- I can not properly re scale <canvas> with width and height attributes
- vue-chart.js : Data available as computed properties, but not showing in chart
- Canvas displays initially in Chrome but not in Firefox
- Chart.js: A value is empty, but the line must not be broken
- Chart.js Polar Area Chart is not scale right
- On click of legend, bar is hiding without issue but data value is not hiding in charts.js
- VueJs and ChartJs - Chart is responsive in width, but not height?
- Google charts: Error: Row 0 has 1 columns, but must have 2
- Problem with script src for Chart.js. The CDN for Chart.js funtions fine, so my code is ok. Somehow I'm not linking the file correctly
- ChartJS have xAxes labels match data source
More Query from same tag
- Bold text inside doughnut chart (chart.js)
- How to know the length of the horizontal bar in Chart.js
- How to integrate basic ChartJs customizations when using react-chartjs-2?
- Custom label from using separate array in Chart JS
- Hovering over line chart shows old chart data issue in chart.js
- Javascript: problems with the order of my index
- Learning Chartjs .destroy()
- Chart.js timeline
- What are these line-boxes called in Chart.js, and how do I turn them off?
- How to always show line chart tooltip in ionic-angular.?
- Chart.js, Javascript, unable to sum a data set. Javascript return NaN and I am not sure why
- Chart.js: Fixed horizontal location of vertical axis
- Chartjs with zoom plugin zooms too much with wheel just with single turn
- Stacked Mixed Horizontal Bar Chart in Charts.Js Axes Positioning
- Multi Line Chart.js with two Y-Axes
- Chart.js - Pie chart calculate sum of visible values after legend click
- PaddingLeft of afterFit does not work during chart.js option
- How do I use ChartJS with a background color in the space between two line charts?
- Plot a multi-line graph from grouped JSON object using Charts.js
- Chart.js How to actualize canvas due to new x-axis range typed by user
- Cannot read property 'reactiveProp' of undefined in vue-chartjs
- How to include adapters and plugins with ChartJS
- Add images inside bar chart in chart.js
- ChartJS changing displayed data based on dropdown selection
- Can I interpret Django object values as JSON data within the JS script in my HTML?
- My chart.js canvas disappears after hide() function
- CHART.JS scriptable backgroupColor attribute
- Display Chart.js chart in Node.js
- Is it possible to create a canvas to extract image data without actually rendering the canvas?
- How to access data outside the onclick function