I am using the same example line chart shown here. However, I have black fill under the lines on my chart. How do I remove the black fill from under the lines. In the documentation under LineChartOptions there it only shows two configurable options, HidePoints and LinePoint. Here is my example. The same thing happens to my time series chart. Thank you.
var lineChart = bb.generate({
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 50, 20, 10, 40, 15, 25]
],
type: "line", // for ESM specify as: line()
},
bindto: "#lineChart"
});
Adding fill: none to the bb-chart-lines class should do the trick.
Add this to your CSS:
.bb-chart-lines {
fill: none;
}
Link to Codepen
Related
I wanted to generate a pie-chart to include in an email body by generating < img src = "...." > tag. For that, i came across a chart library called Quickcharts(https://quickchart.io/) which is an open-source charting library.
Somehow, I don't know how to change the background color of each slice in Quickcharts. Currently, I have something like this,
https://quickchart.io/chart?width=270&height=200&c={type:%27pie%27,data:{labels:[%27High%27,%27Medium%27,%20%27Low%27],%20datasets:[{data:[50,60,70]}]}}
I want to change the background color of pie chart and bring the quickcharts, something similar to this.
https://image-charts.com/chart?cht=pc&chco=4e73df%2C0f3dc4%2C9fb4f3&chd=t:11,110,69&chs=500x160&chl=5.8%25%7C57.9%25%7C36.3%25&chdl=High%7CMedium%7CLow
Let me know if anyone could help. Thanks in Advance.
Using Chart.js, you can set the background color of a pie chart with the backgroundColor attribute:
{
type: 'pie',
data: {
labels: ['High', 'Medium', 'Low'],
datasets: [{
data: [50, 60, 70],
backgroundColor: ['#4e73df', '#0f3dc4', '#9fb4f3']
}]
}
}
Additionally, you may want to change the color of the labels using the datalabels plugin:
{
type: 'pie',
data: {
labels: ['High', 'Medium', 'Low'],
datasets: [{
data: [50, 60, 70],
backgroundColor: ['#4e73df', '#0f3dc4', '#9fb4f3']
}]
},
options: {
plugins: {
datalabels: {
color: '#fff'
}
}
}
}
Pack it into the chart URL:
https://quickchart.io/chart?bkg=white&c=%7Btype%3A%27pie%27%2Cdata%3A%7Blabels%3A%5B%27High%27%2C%27Medium%27%2C%27Low%27%5D%2Cdatasets%3A%5B%7Bdata%3A%5B50%2C60%2C70%5D%2CbackgroundColor%3A%5B%27%234e73df%27%2C%27%230f3dc4%27%2C%27%239fb4f3%27%5D%7D%5D%7D%2Coptions%3A%7Bplugins%3A%7Bdatalabels%3A%7Bcolor%3A%27%23fff%27%7D%7D%7D%7D
And it will look like this:
I want to create a bar chart where the bars are centered between the grid lines.
This behaviour was possible before this merge request:
https://github.com/chartjs/Chart.js/pull/4545
In the original version this was possible with offsetGridLines: false (category scale).
I created a stackblitz with a angular app using chart.js and ng2-charts:
https://stackblitz.com/edit/angular-barchart-example-mg192a?file=src%2Fapp%2Fbarchart%2Fbarchart.ts
Working Code with chart.js 2.6.0:
public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true,
scales: {
xAxes: [{
offset: true,
gridLines: {
offsetGridLines: false
}
}]
}
}
Results in a bar chart like I want it to be (only the bars could still be centered between the grid lines):
In the current version of Chart.js (I'm currently using 2.9.3) the bars are arranged to the right and left of the grid lines:
Does the new version of chart.js offer the possibility to center the bars between the gridlines?
First you need to define categoryPercentage: 1 for both datasets.
public barChartData:any[] = [
{
data: [55, 60, 75, 82, 56, 62, 80],
label: 'Company A',
categoryPercentage: 1,
},
{ data: [58, 55, 60, 79, 66, 57, 90],
label: 'Company B',
categoryPercentage: 1,
}
];
categoryPercentage (default 0.8): Percent (0-1) of the available width each category should be within the sample width. more...
Chart.js however still won't properly layout the bars if some of them are not contained in the visible area. Therefore you'll also have to make sure that all bars are shown in the chart by defining an appropriate value for yAxis.ticks.min.
yAxes: [{
ticks: {
min: 50
}
}]
Please have a look at your amended code in the following StackBlitz
I am trying to draw a very basic line chart using c3.js in react. But the the chart output appears with dark areas around the lines, which I assume is not a feature of the graph, because I used another graph library and the dark areas persisted. Anyone knows what the source of error can be?
Here is a picture of how the chart looks like:
Here is the code:
import React from "react";
import * as c3 from 'c3'
class Hello extends React.Component {
drawGraph = () =>
{
var chart = c3.generate({
bindto: this.refs.chart,
data: {
xs: {
'data1': 'x1',
'data2': 'x2',
},
columns: [
['x1', 10, 30, 45, 50, 70, 100],
['x2', 30, 50, 75, 100, 120],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 20, 180, 240, 100, 190]
]
}
});
}
render() {
return (
<div>
<br/>
<div id='chart' ref={'chart'} style={{width: '100%', height: '100%'}}><button onClick={this.drawGraph}>draw</button></div>
</div>
);
}
}
export default Hello;
If the package was installed using npm (i.e. npm install c3 or yarn add c3), it's necessary import the styles from .css files: Inside the main component, add the line
import "c3/c3.min.css";
Apparently the problem can be solved just by adding a single line of code in the beginning:
import "../../node_modules/c3/c3.css";
If you come across here as I did from top results of google search, you will be probably surprised why both of other solutions don't work.
In Vue 3 Cli there is issue with .css file loader not working properly, but you can circumvent this if you add to your main.js file, following line:
require('c3/c3.css');// C3 chart styles
This will enable you to use c3 in rest of your project, with importing c3 in components like so:
<template>
<div id="testChart"></div>
</template>
<script>
var c3 = require('c3');
export default {
async mounted() {
c3.generate({
bindto: "#testChart",
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
}
};
</script>
When my graph renders, everything is great EXCEPT the legend only shows the colors black. The grouped bar chart graph is displaying how I would expect. All of the data and colors are wonderful, but the legend is not right.
I am loading a plotly graph into a salesforce Visualforce page as follows:
<apex:panelGroup styleClass="charts" layout="block">
<div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
</apex:panelGroup>
<script>
var trace1 = {
y: ['B2B', 'Commercial', 'Retail'],
x: [20, 14, 23],
marker: {
color: ['#f8b98d', '#f8b98d', '#f8b98d']
},
name: 'Annual Quota',
type: 'bar',
orientation: 'h'
};
var trace2 = {
y: ['B2B', 'Commercial', 'Retail'],
x: [12, 18, 29],
marker: {
color: ['#f58b3f', '#f58b3f', '#f58b3f']
},
name: 'Current Market Size',
type: 'bar',
orientation: 'h'
};
var data = [trace1, trace2];
var layout = {barmode: 'group'};
Plotly.newPlot('myDiv', data, layout, {displayModeBar: false});
</script>
I had a similar problem to this - custom colours on stacked bars looked great, but the legend swatches all black.
I couldn't find an official solution, so manually set the colours in the legend after the chart was generated using Plotly's built in d3, e.g:
var legendBoxes = document.getElementById("div-id-for-plot").getElementsByClassName("legendbar");
Plotly.d3.select(legendBoxes[0]).style("fill", "put your colour definition here");
(this example just styles a single box)
I have implemented that example: http://www.highcharts.com/demo/combo without pie chart. I want to add it dynamically after a time later. How can I add a chart into a combo chart dynamically at HighCharts?
If you look the demo you will see that the pie chart isn't a chart, it's just a serie.
So, to add a serie you have to use addSeries passing thrue parameter all the pie serie, like the following.
chart.addSeries({
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13,
color: '#4572A7' // Jane's color
},
{
name: 'John',
y: 23,
color: '#AA4643' // John's color
},
{
name: 'Joe',
y: 19,
color: '#89A54E' // Joe's color
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
});
DEMO
You can use charts.push as shown in this url http://calibrate.be/labs/exporting-highcharts-js-pdf-docx-tcpdf-and-phpword
Let me know if you can't have this to work.
EDIT: You will need to define charts as var charts = []; as global variable. And this has not been tested by me.