What could be the cause to this artifact? I have moved my code from my codepen https://codepen.io/mads10000/pen/vaBdBd
<div class="chartsContainer">
<div class="slaChart">
</div>
</div>
to my HTML boilerplate
Github - Commit with chart that has an artifact
It should not have these black spots as seen on image. It looks right on my codepen.
The solution was, showLine: false, fixed it.
var lineChart = new Chartist.Line('.slaChart', {
labels: ['January', '', 'February', '', 'March'],
series: [
// [0, 5, 8, 10, 7, 6, 5, 5, 4],
[0, 50, 35, 70, 50, 90],
[0 , 45, 25, 55, 35, 70]
]
}, {
low: 0,
high: 100,
showArea: true,
showLine: false, <-------- showLine false fixed it
showPoint: false,
fullWidth: true,
plugins: [
// Chartist.plugins.lineSelector()
],
axisY: {
onlyInteger: true,
offset: 20
},
axisX: { showGrid: false }
});
This is due to the CSS fill property. Something on your page might have set the default fill to be black. For a line path the fill doesn't make sense to clear it you just need to reset the fill to none.
.ct-line {
fill: none
}
Related
I am building a line chart in chartjs, similar to this
Here is what I have achieved:
How can I make the zero on y-axis on the same level as the labels on the x axis.
I have tried almost everything from the chartjs documentation, but nothing seems to work
Codepen link
Here is my config object:
var config = {
type: 'line',
options: {
responsive: true,
maintainAspectRatio: false,
legend: { display: false },
scales: {
xAxes: [{
gridLines: {
drawBorder: false,
color: "#EEEEEE",
beginAtZero: false,
zeroLineColor: 'transparent'
},
ticks: {
fontColor: "#9A9A9A",
fontStyle: '600',
fontSize: 15
}
}],
yAxes: [
{
gridLines: {
color: "#EEEEEE",
beginAtZero: false,
zeroLineColor: 'transparent',
drawBorder: false
},
ticks: {
max: 30,
min: 0,
stepSize: 5,
fontColor: "#9A9A9A",
fontStyle: '505',
fontSize: 14
}
},
]
}
},
data: {
labels: ["", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
datasets: [{
data: [null, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
showLine: true,
lineTension: 0,
fill: false,
pointRadius: 4,
borderWidth: 2,
pointBackgroundColor: "#FFFFFF",
backgroundColor: "transparent",
borderColor: "#973490"
}]
}
};
The first chart is a timeseries chart. Is this what you’re trying to accomplish?
With the linear axis chart you could add [null, null, null] to your data array and have corresponding xaxis values. This would leave space on the end.
Alternatively using the offset property in options may help
Or add a margin to the chart
I am trying to plot multiple line charts on a graph and I have a toggle to disable / enabled some of the plots. I am destroying / updating whenever required but when I see a particular plot separately, I can see a different plot but when its a mixed graph, the line shows a different plot.
Example fiddle : https://jsfiddle.net/njmr15w9/ ( You can try to comment first two plots from the dataset array and you can see how the green plot changes and shows incorrect points, which should not be the case )
labels: [1, 2, 3, 4, 5,6,7,8],
datasets: [
{
label: "Set 1",
data: [10, 20, null, 40, 30,null,20,40],
borderColor: "#F00",
fill: false,
steppedLine: false,
tension: 0,
fillBetweenSet: 1,
fillBetweenColor: "rgba(255,0,0, 0.2)"
},
{
label: "Set 2",
data: [60, 40, 10, 50, 60,null,50,20],
borderColor: "#00F",
fill: false,
steppedLine: false,
tension: 0.5
},
{
label: "Set 2",
data: [40, 50, 30, 30, 20,null,60,40],
borderColor: "#0D0",
fill: false,
steppedLine: false,
tension: 0,
fillBetweenSet: 1,
fillBetweenColor: "rgba(5,5,255, 0.2)"
}
]
};
var chartOptions = {
responsive: true,
title: {
display: true,
text: 'Demo Fill between lines'
}
};
var chartDemo = new Chart($('#demo').get(0), {
type: 'line',
data: chartData,
options: chartOptions
});
I followed your instructions and commented out the first two datasets. The result looks fine to me.
const chartData = {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
datasets: [
/*
{
label: "Set 1",
data: [10, 20, null, 40, 30, null, 20, 40],
borderColor: "#F00",
fill: false,
steppedLine: false,
tension: 0,
fillBetweenSet: 1,
fillBetweenColor: "rgba(255,0,0, 0.2)"
},
{
label: "Set 2",
data: [60, 40, 10, 50, 60, null, 50, 20],
borderColor: "#00F",
fill: false,
steppedLine: false,
tension: 0.5
},
*/
{
label: "Set 2",
data: [40, 50, 30, 30, 20, null, 60, 40],
borderColor: "#0D0",
fill: false,
steppedLine: false,
tension: 0,
fillBetweenSet: 1,
fillBetweenColor: "rgba(5,5,255, 0.2)"
}
]
};
var chartOptions = {
responsive: true,
title: {
display: true,
text: 'Demo Fill between lines'
}
};
var chartDemo = new Chart(document.getElementById('demo'), {
type: 'line',
data: chartData,
options: chartOptions
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="demo" height="90"></canvas>
UPDATE
The problem lies in the fillBetweenLinesPlugin that simply doesn't work correctly when only one line is drawn. This can easily be fixed by changing the condition in the for loop by adding datasets.length > 1 as follows.
for (var d = 0; datasets.length > 1 && d < datasets.length; d++) {
...
}
I have a line graph with data for each month. No matter where I add the color option in the option list or even as part of the data the line is still the default yellow.
Here is the code that has it working with the default.
Where do i need to add a color variable to make it display.
var plotData = [[1, data.data['Jan']], [2, data.data['Feb']], [3, data.data['Mar']], [4, data.data['Apr']], [5, data.data['May']], [6, data.data['June']], [7, data.data['July']], [8, data.data['Aug']], [9, data.data['Sep']], [10, data.data['Oct']], [11, data.data['Nov']], [12, data.data['Dec']]];
$.plot('#placeholder', [plotData]), {
series: {
lines: {
show: true,
lineWidth: 4,
},
points: {
show: true
},
shadowSize: 0
},
grid: {
hoverable: true,
clickable: false,
borderColor: '#EDEDED',
borderWidth: 1,
labelMargin: 15,
backgroundColor: '#FFF'
},
yaxis: {
min: 0,
color: '#EDEDED'
},
xaxis: {
color: '#FFF',
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: '%x: %y',
shifts: {
x: -30,
y: 25
},
defaultTheme: false
}
}
Move the ) from behind [plotdata] to the end of the options object:
$.plot('#placeholder', [plotData]), {
^
As it is now, you call plot without options, so the default options are used.
Here is a fiddle which shows the working code.
For the right way to define custom colors, see here or in the above fiddle.
I have a cal-heatmap that is displaying the last week of data. Each row is a day and each column is an hour. I have labels on the days but not the hours. How can I add these?
var cal = new CalHeatMap();
cal.init({
itemSelector: "#cal-heatmap",
domain: "day",
subDomain: "hour",
rowLimit: 1,
domainGutter: 0,
data: data,
start: new Date(_.keys(data)[0] * 1000),
cellSize: 15,
cellPadding: 5,
cellRadius: 3,
range: 7,
verticalOrientation: true,
displayLegend: false,
label: {
position: "left",
offset: {
x: 20,
y: 12
},
width: 110
},
legend: [40, 80, 120, 160, 200, 240, 280, 320],
legendColors: ["#f9eb49", "#d66938"]
});
According to the author, this is not yet possible so I've come up with a workaround that looks decent. I just made another div above my main cal-heatmap that shows a single row with an empty label so that it lines up with the table below. Then I populate it with the below code:
var labels = new CalHeatMap();
labels.init({
itemSelector: "#cal-heatmap-labels",
domain: "day",
subDomain: "hour",
rowLimit: 1,
domainGutter: 0,
data: {},
cellSize: 15,
cellPadding: 5,
cellRadius: 3,
range: 1,
verticalOrientation: true,
displayLegend: false,
tooltip: true,
subDomainTextFormat: "%-I",
subDomainDateFormat: "%-I%p",
domainLabelFormat: "",
label: {
position: "left",
offset: {
x: 20,
y: 12
},
width: 110
}
});
This is working for me and looks half decent. Hopefully this helps someone at least until this feature is developed.
I have just implemented a chart using jQplot plugin. I have used OHLCRenderer as the renderer and the chart looks like this.
Can you please tell me how to add a mouse-over option to the bars so that i can show some information when i mouse-over each bars. Thanks
This is the code
var catOHLC = [
[1, 10, 6.5, 10, 10],
[2, 1.2, 5, 1.2, 1.2],
[3, 8, 10, 8, 8],
];
var catOHLC1 = [
[1, 0, 5, 0, 0]
];
var ticks = ['A', 'B', 'C', 'D', 'E'];
var ticks2 = [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
plot4 = $.jqplot('chart4', [catOHLC, catOHLC1], {
stackSeries: true,
axes: {
xaxis: {
renderer:$.jqplot.CategoryAxisRenderer,
ticks:ticks
},
yaxis: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
ticks: ticks2,
max: 24,
min: 0
}
},
series: [{ renderer: $.jqplot.OHLCRenderer, rendererOptions: { candleStick: false, tickLength: 0, lineWidth: 10 } },
{ renderer: $.jqplot.OHLCRenderer, rendererOptions: { candleStick: false, tickLength: 0, lineWidth: 10 } }],
});});
I used the jqplot highlighter plugin to make this work with a slightly modified version of your code. Here is the jsfiddle, and the code is below. Note that this is fairly similar to the example at http://www.jqplot.com/tests/candlestick-charts.php .
plot4 = $.jqplot('chart4', [catOHLC, catOHLC1], {
series: [{
renderer: $.jqplot.OHLCRenderer,
rendererOptions: {
tickLength: 4,
lineWidth: 10
}
}, {
renderer: $.jqplot.OHLCRenderer,
rendererOptions: {
tickLength: 4,
lineWidth: 10
}
}],
highlighter: {
show: true,
showMarker: false,
tooltipAxes: 'xy',
yvalues: 4,
formatString: '<table class="jqplot-highlighter"> \
<tr><td>x:</td><td>%s</td></tr> \
<tr><td>open:</td><td>%s</td></tr> \
<tr><td>hi:</td><td>%s</td></tr> \
<tr><td>low:</td><td>%s</td></tr> \
<tr><td>close:</td><td>%s</td></tr></table>'
}
});