I'd like to be able to control bar colors based on xAxis/category label name, throughout multiple charts, while using the dataset.source option of feeding data.
I'm guessing the solution might involve using visualMap?
customColors = {
x1: '#123',
x2: '#456',
x3: '#789',
...
}
I don't think visualMap is the way to do this, you probably want to set the colors in series:
https://echarts.apache.org/en/option.html#series-bar.data.itemStyle.color
or define a color palette:
https://echarts.apache.org/en/option.html#color
Echarts should color the chart by series by default:
https://echarts.apache.org/en/option.html#series-bar.colorBy
Related
How do I obtain colour imagery, or more generally, styling information for each legend entry to construct a custom legend in a chart in Swift Charts?
I have a chart here, with a legend positioned on the right, but using the content: argument of chartLegend does not pass any info into the closure to use. I would like to wrap the legend into a scroll view, so when there are too many entries, the chart will appear correctly on the screen, and the user can scroll through the legend below the chart.
Chart(points, id: \.self) { point in
LineMark(
x: .value("time/s", point.timestamp),
y: .value("potential/mV", point.potential)
)
.foregroundStyle(by: .value("Electrode", point.electrode.symbol))
}
.chartLegend(position: .bottom)
// ...
Here is the chart with too many legend entries interfering with the chart sizing, resulting in cropping:
And here is the chart with only a few entries so that the chart is sized correctly, with no cropping, and the legend has text to discern between the electrodes they represent:
Any help is much appreciated.
Not scrolling but the chart legend can be placed on the side with code like this:
.chartLegend(position: .trailing, alignment: .top)
This gives more room for a legend. The legend won't scroll but all the items will be listed even if going past the end of the chart. The frame height can be increased. The example shows a before(default) and after(using the code above).
The colors can be assigned manually using the chartForegroundStyleScale like this after the end of the chart:
.chartForegroundStyleScale([
"Hong Kong": Color.green,
"London": Color.red,
"Taipei": Color.purple,
"New York": Color.teal,
"Paris": Color.pink,
"Sydney": Color.orange
])
Symbols can be created based on the series:
.symbol(by: .value("City", series.city))
I've got an ECharts chart that has multiple line series and a scatter series that represents events. For the line series, we left the symbol at the default, but for the event scatter series we set the symbol to 'diamond'. These symbols show up on the chart & in the series legend as expected. However, the tooltip always shows a 10 pixel dot for the marker. The color however is picked up from the series (and even from the visualMap config!). My initial assumption had been that the symbol would also be picked up from the series. In our case we wanted to use a function for tooltip.formatter and even in that function we couldn't figure out how to access and swap in the series symbol for the marker. We ended up working around it by just custom styling our own html to plug in for the marker that matched the diamond symbol pretty well.
So the open questions are:
Is there a way to have the tooltip marker pick up the symbol from the series?
If not, is this a bug? I'm happy to put in an issue on the project but I don't want to do that until I understand a bit more.
Here's some code to illustrate what we had to do to get the diamond in there in case it helps the discussion or if others want to leverage this workaround:
formatTooltip(args){
let time = DateTime.fromISO(args[0].data[0], { zone: this.user.timeZone })
let tooltip = `<div><b>${time.toFormat(TOOLTIP_FORMAT)}</b></div>`
args.forEach(({ marker, seriesName, value }) => {
if (seriesName === 'Events'){
let myMarker = `<span style="display:inline-block;margin-right:4px;width:10px;height:10px;background:${value[4]};transform:rotate(45deg);"></span>`
tooltip += `<div>${myMarker} ${value[3] ? value[3]: ''}</div>`
} else {
value = value || [0, 0]
tooltip += `<div>${marker} ${seriesName}: ${value[1]}</div>`
}
})
return tooltip
},
For better understanding of this question, let me show a working example in TradingView webpage, on which the following chart shows the combination of Momentum (area chart) + ADX (line chart):
As you can see, there are 2 vertical values, at left side is the ADX which the scale goes usually from 0 to 60(+-), but the right side, it can grow much more.
On my attempt to achieve the same here, the momentum (area chart) has a huge range, and the adx (lineal chart) goes from 0 to 60, so when it tries to fit both values under the same scale, my blue line looks like it's almost zero, in comparison with the area chart values. (Mouse-over the blue line showing that is currently 43)
So I think you get the point, would it be possible to have 2 scales/vAxis for each series of values?
I checked documentation already but nothing here seems to refer to what I mention:
https://developers.google.com/chart/interactive/docs/gallery/combochart
And just in case you need the options provided to the chart, nothing advanced, just the basic examples:
options:{
seriesType: 'area',
series: {
0: { type: 'line', color: 'blue' }
}
};
use option --> targetAxisIndex -- in the series option...
zero is the default v-axis
targetAxisIndex: 0
to create a second v-axis, assign one of the series to index 1
series: {
1: {
targetAxisIndex: 1
}
}
Found the solution over this post in the documentation, it is conceptually known as DUAL-Y Charts
https://developers.google.com/chart/interactive/docs/gallery/columnchart#dual-y-charts
I have a stacked bar chart that only ever has 5 categories(but the value of the categories change from year to year, it is a sliding 5 year window).
I have successful customised the bars to the colors I want.
But now I wish to make the label of each Category the same color as the customised bar color.
Is there a way to do this?
You can use custom code for this.
In Report Properties | Code, you can paste in the following code:
Private colourPalette As String() = {"#418CF0", "#FCB441", "#DF3A02", "#056492", "#BFBFBF", "#1A3B69", "#FFE382", "#129CDD", "#CA6B4B", "#005CDB", "#F3D288", "#506381", "#F1B9A8", "#E0830A", "#7893BE"}
Private count As Integer = 0
Private mapping As New System.Collections.Hashtable()
Public Function GetColour(ByVal groupingValue As String) As String
If mapping.ContainsKey(groupingValue) Then
Return mapping(groupingValue)
End If
Dim c As String = colourPalette(count Mod colourPalette.Length)
count = count + 1
mapping.Add(groupingValue, c)
Return c
End Function
This will give you the option of the pastel colour palette. If you want other colours, simply replace the hex colour codes with values of your choice.
To use this, simply use the following expression:
=Code.GetColour(Fields!Thingy.Value)
Use this on your series and your label fill expressions. This will ensure that the same colour appears for both. If you have multiple graphs with the same values in, this will also ensure that the same data series across multiple graphs always have the same colour.
I have this chart, which has line and bars:
Is it possible to somehow extend the line outside of the chart in both directions? This line serves an important role, it is sort of a "limit" for bars, I just don't want for it to start at the center of the first bar, and to end at the center of the final bar.
I can extend it to the right by simply extending the dataset of the line, but is it possible to extend it also to the left somehow?
I figured out answer based on answer from this question: Is it able to align line chart at left margin in mixed chart?
I'm extending line type like this:
Chart.controllers.LineNoOffset = Chart.controllers.line.extend({
updateElement: function(point, index, reset) {
Chart.controllers.line.prototype.updateElement.call(this, point, index, reset);
const meta = this.getMeta();
const xScale = this.getScaleForId(meta.xAxisID);
point._model.x = xScale.getPixelForValue(undefined, index-0.5);
},
});
Now the LineNoOffset type of the line will start from the left border of the chart, which fulfills my need.