Billboard.js: Line chart w/ regions styling?

Created on 17 Jul 2018 · 6Comments · Source: naver/billboard.js

Description

Is it possible to style the dashed sections of a line chart with regions?

feature question

Source

irislieuw

Most helpful comment

@irislieuw, I just implemented the new dasharray styling for data.regions.
You can notice from the below example image, having different dashed style for regions.

data1: [{
    start: 1,
    end: 2,
    style: {
                // The first number specifies a distance for the filled area,
                // and the second a distance for the unfilled area.
        dasharray: "5 3"
    }
}]

You can try with the nightly build.

https://github.com/naver/billboard.js/tree/nightly/dist

netil on 19 Jul 2018

❤1 👍1

All 6 comments

Hi @irislieuw, I can't get that exactly. Could you attach img or more detailed info for this?

netil on 17 Jul 2018

@netil Thanks for the quick response! Yes, I'd like to apply styling for the dashed sections of a line in a line chart with regions (https://naver.github.io/billboard.js/demo/#Chart.LineChartWithRegions). For example, I'd like to adjust the stroke-dasharray, similar to this example https://naver.github.io/billboard.js/demo/#Style.StyleForLines

I've got some line charts now that I'm applying a thicker stroke width to, which makes the dashed sections of the line "fuzzy"

irislieuw on 17 Jul 2018

From the image above, the first part looks "fuzzy" and isn't really distinguishable from other part of the region and you want to style in somehow to get some differentiation from others, right?

Well, there're two ways on doing for now.

Via CSS(the second example you mentioned) property, stroke-dasharray

The style is applied to whole line. You can't style a partial of line.

Or via using provided data.regions option
This option makes to draw partial or entire line as "dashed" style. This is done manipulating its path data directly. But the dashes aren't configurable.

IMO, the best way is provide a configurable dashed option(like stroke-dasharray) for this.
I'll take considering to implement for the future release.

netil on 18 Jul 2018

👍1

Thanks! Passing along a stroke-dasharray property when specifying the dashed sections of the line would be awesome.

irislieuw on 18 Jul 2018

@irislieuw, I just implemented the new dasharray styling for data.regions.
You can notice from the below example image, having different dashed style for regions.

data1: [{
    start: 1,
    end: 2,
    style: {
                // The first number specifies a distance for the filled area,
                // and the second a distance for the unfilled area.
        dasharray: "5 3"
    }
}]

You can try with the nightly build.