I want to add the following function to the toolbar of react quill.
num 1 ~ 20 text size custom button
More than 15 types of font styles
Any good way?
current:
const modules = {
toolbar: [
// [{ font: [] }],
[{ size: ['14px', '16px', '18px'] }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
["bold", "italic", "underline", "strike"],
[{ color: [] }, { background: [] }],
[{ script: "sub" }, { script: "super" }],
["blockquote", "code-block"],
[{ list: "ordered" }, { list: "bullet" }],
[{ indent: "-1" }, { indent: "+1" }, { align: [] }],
["link", "image", "video"],
["clean"],
]
};
Related
I'm using react-chartjs-2.
<HorizontalBar
options={{
legend: {
display: false,
},
tooltips: {
enabled: false,
},
hover: {
mode: null,
},
scales: {
xAxes: [
{
display: false,
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
position: 'right'
},
],
yAxes: [
{
position: "right",
ticks: {
reverse: true,
},
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
},
],
},
plugins: {
tooltip: {
enabled: false,
},
},
}}
data={{
datasets: [
{
label: "My First dataset 2",
borderWidth: 0,
backgroundColor: [
"#68B68A",
"#5B9FC9",
"#83C39F",
"#85B7D6",
"#9FD1B4",
"#C2DAEB",
],
data: ...,
barPercentage: 0.5,
},
],
}}
/>
I need to align horizontal bars to the right side like this
but actual result from my code is this
You could use floating bars for this:
const options = {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [
[
20,
12
],
[
20,
19
],
[
20,
3
],
[
20,
5
],
[
20,
2
],
[
20,
14
]
],
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
You put the maximum value of your axis as the first or last (chart.js will render it the same) in your array. Then for the other value you enter the start point. So that would be max value - the percentage
I am using react-quill for mentioning users however I am not able to style mention list ,actually when I mention user, long list of user gets displayed on the screen which needs scrollbar to make it more presentable.how to achieve scrollbar in mention list in React-quill?
here is the code for better understanding.
<div>
<ReactQuill
onChange={handleChange}
value={editorHtml}
modules={modules}
formats={formats}
bounds={".app"}
placeholder={props.placeholder}
/>
</div>
);
}
const modules = {
toolbar: [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ list: "ordered" }, { list: "bullet" }],
["bold", "italic", "underline"],
[{ color: [] }, { background: [] }],
// [{ script: 'sub' }, { script: 'super' }],
[{ align: [] }],
["link", "blockquote", "emoji"],
["clean"],
],
clipboard: {
// toggle to add extra line breaks when pasting HTML:
matchVisual: false,
},
mention,
"emoji-toolbar": true,
"emoji-textarea": false,
"emoji-shortname": true,
};
const formats = [
"header",
"font",
"size",
"bold",
"italic",
"underline",
"strike",
"blockquote",
"list",
"bullet",
"indent",
"link",
"mention",
"emoji",
];
This worked for me
.ql-mention-list-container {
max-height: 200px;
}
Our requirement is to render the bar chart as Expected Image. we are using chartJs library to render the chart. we are able to render the bar chart but for one of the bar we need to show
the background color as gradient. To achieve this we used the following below code snippet:
but it render as Rendered graph. Can you please help me out in rendering the chart as expected.
JSFiddleLink
const data = [{
type: "Sample 1",
data: [600, 400, 200, 800]
}, {
type: "Sampel 2",
data: [700, 300, 600, 600]
}, {
type: "Total",
data: [1300, 700, 800, 1400]
}];
const gradient = document.getElementById('myChart').getContext('2d').createLinearGradient(0, 250, 0, 0);
gradient.addColorStop(1, '#acd7fa')
gradient.addColorStop(0.4, '#FFFFFF')
new Chart('myChart', {
type: "bar",
data: {
labels: ["A", "B", "C", "D"],
datasets: [
{
label: data[0].type,
xAxisID: "x1",
data: data[0].data,
// fillColor: background_1,
// highlightFill: background_2,
backgroundColor: "rgb(54, 162, 235)" ,
// backgroundColor: background_1,
barPercentage: 1,
},
{
label: data[1].type,
xAxisID: "x1",
data: data[1].data,
backgroundColor:"rgb(255, 159, 64)",
barPercentage: 1,
},
{
label: data[2].type,
xAxisID: "x2",
data: data[2].data,
backgroundColor: gradient,
barPercentage: 1,
},
],
},
options: {
legend: {
labels: {
filter: item => item.text != 'Total'
}
},
scales: {
yAxes: [{
ticks: {
min: 0,
stepSize: 200
}
}],
xAxes: [{
id: 'x1'
},
{
id: 'x2',
display: false,
offset: true
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="150"></canvas>
The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterLayout hook for creating different gradients for each value of the third dataset (the totals).
Please take a look at your amended code below and see how it works. You may also consult this StackBlitz that illustrates how it can be done with react-chartjs-2.
const data = [
{ type: "Sample 1", data: [600, 400, 200, 800] },
{ type: "Sampel 2", data: [700, 300, 600, 600] },
{ type: "Total", data: [1300, 700, 800, 1400] }
];
new Chart('myChart', {
type: "bar",
plugins: [{
afterLayout: chart => {
let ctx = chart.chart.ctx;
ctx.save();
let yAxis = chart.scales["y-axis-0"];
let yBottom = yAxis.getPixelForValue(0);
let dataset = chart.data.datasets[2];
dataset.backgroundColor = dataset.data.map(v => {
let yTop = yAxis.getPixelForValue(v);
let gradient = ctx.createLinearGradient(0, yBottom, 0, yTop);
gradient.addColorStop(0.4, '#FFFFFF');
gradient.addColorStop(1, '#acd7fa');
return gradient;
});
ctx.restore();
}
}],
data: {
labels: ["A", "B", "C", "D"],
datasets: [{
label: data[0].type,
xAxisID: "x1",
data: data[0].data,
backgroundColor: "rgb(54, 162, 235)",
barPercentage: 1
},
{
label: data[1].type,
xAxisID: "x1",
data: data[1].data,
backgroundColor: "rgb(255, 159, 64)",
barPercentage: 1
},
{
label: data[2].type,
xAxisID: "x2",
data: data[2].data,
barPercentage: 1
}
]
},
options: {
legend: {
labels: {
filter: item => item.text != 'Total'
}
},
scales: {
yAxes: [{
ticks: {
min: 0,
stepSize: 200
}
}],
xAxes: [{
id: 'x1'
},
{
id: 'x2',
display: false,
offset: true
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="150"></canvas>
I am trying to create a chart like this. Below is my chart code. However, I am unable to set a different color in the second bar. The first color in the first bar gets set in the second bar.
self.chart = {
type: 'horizontal-bar',
options: {
responsive: true,
maintainAspectRatio: false,
tooltips: {
enabled: true,
callbacks: {
label: function (tooltipItem, _) {
return $filter('number')(tooltipItem.xLabel);
}
}
},
events: ['click', 'mousemove'],
hover: {
onHover: function(item, chartElement) {
item.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}
},
scales: {
xAxes: [{
scaleLabel: {
stacked: true,
display: true,
labelString: "Test"
},
ticks: {
stacked: true,
beginAtZero: true,
maxRotation: 0,
minRotation: 0,
callback: function (value) {
return $filter('number')(value);
}
}
}]
}
},
data: [[2,12], [5]],
labels: labels,
colors: [chartBlue, chartGreen],
datasetOverride: [{ stack: 1, fill: false }, { stack: 1, fill: false }]
}
This is the result I am getting.
I need to set a different color (for example yellow) in the second bar.
With colors you define the colors for datasets. With two colors you define two datasets. With your two arrays in data you have two datasets, that's why you can't see an additional color.
You need a third dataset for a third color, with 0 at the labels where you don't want a bar.
Check out the following example (Working example at JSBin):
var config = {
type: 'bar',
data: {
labels: ["January", "February", "March"],
datasets: [{
label: 'Dataset 1',
backgroundColor: 'black',
data: [0, 8, 4]
}, {
label: 'Dataset 2',
backgroundColor: "red",
data: [6, 2, 8],
}, {
label: 'Dataset 3',
backgroundColor: "blue",
data: [3, 0, 0]
}]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
Have you tried to add more data?
data: [[2,12], [5], [1], [4], [3]],
labels: labels,
colors: [chartBlue, chartGreen],
Try it and see what happens to the chart :)
I am trying to plot a line chart and a column chart on separate y-axes in highstock using react. However, the line chart is hidden behind the column chart. Could I have the line chart on the column chart as shown in their example dual chart - https://www.highcharts.com/demo/combo-dual-axes?
I've added a link to my chart to clarify my problem.
const chart_options= {
chart: {
zoomType: 'x'
},
title: {
text: ""
},
tooltip:{
split: false,
shared:true,
valueDecimals: 2
},
legend: {
enabled: true,
layout: 'horizontal'
},
series: [
{
name: 'ABC',
type: 'line',
data: this.props.data1,
yAxis:1,
color:'grey',
lineWidth: 3
},
{
name: 'DEF',
type: 'line',
data: this.props.data2,
yAxis:0,
},
{
name: 'GHI',
type: 'column',
data: this.props.data3,
yAxis:0,
color: '#ffd699',
dataGrouping:{
enabled: false
},
pointWidth: 1
},
],
xAxis: {
type: 'datetime',
gridLineWidth:1,
title: {
text: 'Time'
},
tickPixelInterval: 5
},
yAxis: [
{
labels: {
format: '{value:.0f}%',
},
opposite: false,
tickPixelInterval: 20
},
{
title: {
labels: {
format: '{value:.2f}',
},
tickPixelInterval: 20
},
],
}
Could someone please help?
Thanks.
You can set zIndex propert for the series:
series: [{
zIndex: 1,
...
}, {
zIndex: 0,
...
}]
Live demo: https://jsfiddle.net/BlackLabel/x5aefpLv/
API Reference: https://api.highcharts.com/highstock/series.column.zIndex