Mixing
is it possible to display solid c3 grid lines via CSS instead of default dashed grid line?
is there a way to achieve solid c3 grid lines via css without explicitly declaring line values?
Example:
C3's basic Grid Line example
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 120, 200]
]
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
In general, I've discovered that I can change the default styling of the grid with the following CSS:
.c3 .c3-grid line {
stroke: pink,
stroke-width: 4, -> if width can be changed, why can't I use css to make grid line solid?
opacity: 0.3,
fill: blue,
}
image of how the CSS above looks with the attributes listed above
I know that solid grid lines can be achieved by explicitly declaring them like this
Example:
C3 Style for Grid example
When I say explicitly declaring them I'm referring to the fact that in order to display solid grid lines you have to actually give the lines you want to be displayed. Like the example below:
grid: {
x: {
lines: [{value: 2}, {value: 4}]
},
y: {
lines: [{value: 500}, {value: 800}]
}
}
So I ask, is it possible to use css to make c3's default dashed grid line a solid line?
It seems silly that you can't just use something like:
.c3 .c3-grid line {
stroke: pink,
stroke-width: 4,
opacity: 0.3,
fill: blue,
dashed: false, <-- insert whatever property would give me solid grid lines
}
I've seen one other person ask a similar question here
css graph c3.js gridlines
asked Jan 2 at 19:40
SeattlerSeattler
166
add a comment |
is there a way to achieve solid c3 grid lines via css without explicitly declaring line values?
Example:
C3's basic Grid Line example
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 120, 200]
]
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
In general, I've discovered that I can change the default styling of the grid with the following CSS:
.c3 .c3-grid line {
stroke: pink,
stroke-width: 4, -> if width can be changed, why can't I use css to make grid line solid?
opacity: 0.3,
fill: blue,
}
image of how the CSS above looks with the attributes listed above
I know that solid grid lines can be achieved by explicitly declaring them like this
Example:
C3 Style for Grid example
When I say explicitly declaring them I'm referring to the fact that in order to display solid grid lines you have to actually give the lines you want to be displayed. Like the example below:
grid: {
x: {
lines: [{value: 2}, {value: 4}]
},
y: {
lines: [{value: 500}, {value: 800}]
}
}
So I ask, is it possible to use css to make c3's default dashed grid line a solid line?
It seems silly that you can't just use something like:
.c3 .c3-grid line {
stroke: pink,
stroke-width: 4,
opacity: 0.3,
fill: blue,
dashed: false, <-- insert whatever property would give me solid grid lines
}
I've seen one other person ask a similar question here
css graph c3.js gridlines
asked Jan 2 at 19:40
SeattlerSeattler
166
add a comment |
is there a way to achieve solid c3 grid lines via css without explicitly declaring line values?
Example:
C3's basic Grid Line example
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 120, 200]
]
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
In general, I've discovered that I can change the default styling of the grid with the following CSS:
.c3 .c3-grid line {
stroke: pink,
stroke-width: 4, -> if width can be changed, why can't I use css to make grid line solid?
opacity: 0.3,
fill: blue,
}
image of how the CSS above looks with the attributes listed above
I know that solid grid lines can be achieved by explicitly declaring them like this
Example:
C3 Style for Grid example
When I say explicitly declaring them I'm referring to the fact that in order to display solid grid lines you have to actually give the lines you want to be displayed. Like the example below:
grid: {
x: {
lines: [{value: 2}, {value: 4}]
},
y: {
lines: [{value: 500}, {value: 800}]
}
}
So I ask, is it possible to use css to make c3's default dashed grid line a solid line?
It seems silly that you can't just use something like:
.c3 .c3-grid line {
stroke: pink,
stroke-width: 4,
opacity: 0.3,
fill: blue,
dashed: false, <-- insert whatever property would give me solid grid lines
}
I've seen one other person ask a similar question here
css graph c3.js gridlines
asked Jan 2 at 19:40
SeattlerSeattler
166
is there a way to achieve solid c3 grid lines via css without explicitly declaring line values?
Example:
C3's basic Grid Line example
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 120, 200]
]
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
In general, I've discovered that I can change the default styling of the grid with the following CSS:
.c3 .c3-grid line {
stroke: pink,
stroke-width: 4, -> if width can be changed, why can't I use css to make grid line solid?
opacity: 0.3,
fill: blue,
}
image of how the CSS above looks with the attributes listed above
I know that solid grid lines can be achieved by explicitly declaring them like this
Example:
C3 Style for Grid example
When I say explicitly declaring them I'm referring to the fact that in order to display solid grid lines you have to actually give the lines you want to be displayed. Like the example below:
grid: {
x: {
lines: [{value: 2}, {value: 4}]
},
y: {
lines: [{value: 500}, {value: 800}]
}
}
So I ask, is it possible to use css to make c3's default dashed grid line a solid line?
It seems silly that you can't just use something like:
.c3 .c3-grid line {
stroke: pink,
stroke-width: 4,
opacity: 0.3,
fill: blue,
dashed: false, <-- insert whatever property would give me solid grid lines
}
I've seen one other person ask a similar question here
css graph c3.js gridlines
css graph c3.js gridlines
asked Jan 2 at 19:40
SeattlerSeattler
166
asked Jan 2 at 19:40
SeattlerSeattler
166
asked Jan 2 at 19:40
SeattlerSeattler
166
asked Jan 2 at 19:40
SeattlerSeattler
166
asked Jan 2 at 19:40
SeattlerSeattler
166
166
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I feel quite silly, after spending lots of time prepping my notes to ask my first question on stackoverflow. A colleague mentioned that I should try using the property, stroke-dasharray: 0.
Thus,
.c3 .c3-grid line {
stroke: pink,
stroke-dasharray: 0, <--- turns dashed lines solid
}
According to MDN, the stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape.
After locating the correct css property I was able to find all sorts of resources on the finer points of using stroke-dasharray.
- https://css-tricks.com/almanac/properties/s/stroke-dasharray/
- https://www.w3schools.com/graphics/svg_stroking.asp
In short, it's very possible to use css to style a c3 grid line - if you know what property to use.
answered Jan 2 at 20:21
SeattlerSeattler
166
Thanks for posting the question & self-answer. Useful stuff to know.
– Vanquished Wombat
Jan 8 at 10:26
add a comment |
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54012219%2fis-it-possible-to-display-solid-c3-grid-lines-via-css-instead-of-default-dashed%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I feel quite silly, after spending lots of time prepping my notes to ask my first question on stackoverflow. A colleague mentioned that I should try using the property, stroke-dasharray: 0.
Thus,
.c3 .c3-grid line {
stroke: pink,
stroke-dasharray: 0, <--- turns dashed lines solid
}
According to MDN, the stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape.
After locating the correct css property I was able to find all sorts of resources on the finer points of using stroke-dasharray.
- https://css-tricks.com/almanac/properties/s/stroke-dasharray/
- https://www.w3schools.com/graphics/svg_stroking.asp
In short, it's very possible to use css to style a c3 grid line - if you know what property to use.
answered Jan 2 at 20:21
SeattlerSeattler
166
Thanks for posting the question & self-answer. Useful stuff to know.
– Vanquished Wombat
Jan 8 at 10:26
add a comment |
I feel quite silly, after spending lots of time prepping my notes to ask my first question on stackoverflow. A colleague mentioned that I should try using the property, stroke-dasharray: 0.
Thus,
.c3 .c3-grid line {
stroke: pink,
stroke-dasharray: 0, <--- turns dashed lines solid
}
According to MDN, the stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape.
After locating the correct css property I was able to find all sorts of resources on the finer points of using stroke-dasharray.
- https://css-tricks.com/almanac/properties/s/stroke-dasharray/
- https://www.w3schools.com/graphics/svg_stroking.asp
In short, it's very possible to use css to style a c3 grid line - if you know what property to use.
answered Jan 2 at 20:21
SeattlerSeattler
166
Thanks for posting the question & self-answer. Useful stuff to know.
– Vanquished Wombat
Jan 8 at 10:26
add a comment |
I feel quite silly, after spending lots of time prepping my notes to ask my first question on stackoverflow. A colleague mentioned that I should try using the property, stroke-dasharray: 0.
Thus,
.c3 .c3-grid line {
stroke: pink,
stroke-dasharray: 0, <--- turns dashed lines solid
}
According to MDN, the stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape.
After locating the correct css property I was able to find all sorts of resources on the finer points of using stroke-dasharray.
- https://css-tricks.com/almanac/properties/s/stroke-dasharray/
- https://www.w3schools.com/graphics/svg_stroking.asp
In short, it's very possible to use css to style a c3 grid line - if you know what property to use.
answered Jan 2 at 20:21
SeattlerSeattler
166
I feel quite silly, after spending lots of time prepping my notes to ask my first question on stackoverflow. A colleague mentioned that I should try using the property, stroke-dasharray: 0.
Thus,
.c3 .c3-grid line {
stroke: pink,
stroke-dasharray: 0, <--- turns dashed lines solid
}
According to MDN, the stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape.
After locating the correct css property I was able to find all sorts of resources on the finer points of using stroke-dasharray.
- https://css-tricks.com/almanac/properties/s/stroke-dasharray/
- https://www.w3schools.com/graphics/svg_stroking.asp
In short, it's very possible to use css to style a c3 grid line - if you know what property to use.
answered Jan 2 at 20:21
SeattlerSeattler
166
answered Jan 2 at 20:21
SeattlerSeattler
166
answered Jan 2 at 20:21
SeattlerSeattler
166
answered Jan 2 at 20:21
SeattlerSeattler
166
166
Thanks for posting the question & self-answer. Useful stuff to know.
– Vanquished Wombat
Jan 8 at 10:26
add a comment |
Thanks for posting the question & self-answer. Useful stuff to know.
– Vanquished Wombat
Jan 8 at 10:26
Thanks for posting the question & self-answer. Useful stuff to know.
– Vanquished Wombat
Jan 8 at 10:26
Thanks for posting the question & self-answer. Useful stuff to know.
– Vanquished Wombat
Jan 8 at 10:26
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54012219%2fis-it-possible-to-display-solid-c3-grid-lines-via-css-instead-of-default-dashed%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
