Chartist.js make fill area expand all the way to the right

Question

I'm using showArea: true but can't find the appropriate setting to make that fill all the way. Example:

I assume this is because I don't have any data points after where it ends, but I don't want the green line to extend all the way across the top. Is there another way to accomplish this?

Quintessa

can you provide a plunkr? – Aesthetics

or a codepen/jsfiddle – Chanty

W8 = 100 instead of W3 = 100 :) lol – Roley

Answer 1

You're using showArea:true to render the area. But as you've noted, showArea fills the area associated only with the drawn line.

What you're looking for is an additional area without a line.

In order to achieve this effect, you'll need to create two different lines: The first line will have showArea: false and extend to W3 as shown in your example. This will render the light green line as you have already.

The second line will be invisible have showLine: false and showArea: true and extend all the way across the top to W8.

In other words, you're actually looking to render two different things. One is a line, and one is a fill area.

Finical

Thanks so much this makes a lot of sense. – Quintessa

Answer 2

I guess that the key solution to your problem is to use display:inline-block; for example:

div.page {
color: white;
background: black;
margin: auto;
padding: 1em;
display:inline-block;
}

Poston

Answer 3

In order for the area to highlight you need to insert appropriate data. The showArea property extend as much as the data it has. Here is a proof of concept:

/* Add a basic data series with six labels and values */
var data = {
    labels: [1, 2, 3, 4, 5],
    series: [
        [1, 5, 10, 15, 20],
        [1, 20]
    ]
};

/* Set some base options (settings will override the default settings in Chartist.js *see default settings*). We are adding a basic label interpolation function for the xAxis labels. */
var options = {
    showArea: true,
    axisX: {
        labelInterpolationFnc: function (value) {
            return 'Week ' + value;
        }
    }
};


/* Initialize the chart with the above settings */
new Chartist.Line('.ct-chart', data, options);

.ct-chart {
    width: 450px;
    height: 250px;
}

<link href="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.js"></script>
<div class="ct-chart ct-square"></div>

The two areas are highlighted within the data they represent.

Hope this helps.

Talley