Line chart - Range Marker Gradient fill

[vigneshtg]

Hello, I'm using Line chart for my Android application, where I've set 3 range markers. But for each region , I need to fill with gradient colors like image below and I mean to use only the color of three regions in this image and not the orientation or angle of region:

Further, my current line chart is as follows:

Here, in above of my chart, I've set range markers with range as follows:

96 - 98.8 - 1st region 98.8 - 100.4 - 2nd region 100.4 - 105 - 3rd region.

Now how do I fill those regions with colors given in figure - 1?

Here's my code:

private void setLogText(File file) throws FileNotFoundException {

        AnyChartView anyChartView = findViewById(R.id.any_chart_view);

        anyChartView.setZoomEnabled(true);


        Cartesian cartesian = AnyChart.line();


        cartesian.animation(true);
        cartesian.padding(10d, 20d, 5d, 20d);

        cartesian.crosshair().enabled(false);
        cartesian.crosshair()
                .yLabel(true)
                // TODO ystroke
                .yStroke((Stroke) null, null, null, (String) null, (String) null);

        cartesian.tooltip().positionMode(TooltipPositionMode.POINT);


        cartesian.xAxis(0).title("Time");
        cartesian.xAxis(0).labels().rotation(-45);
        cartesian.yAxis(0).title("Temperature");


        cartesian.yAxis(0).labels().fontSize(9);
        cartesian.xAxis(0).labels().padding(5d, 5d, 5d, 5d);
        cartesian.xAxis(0).labels().fontSize(9);
        cartesian.xAxis(0).labels().hAlign("center");
        cartesian.xAxis(0).labels().vAlign("center");

        cartesian.yGrid(true);
        cartesian.yMinorGrid(true);

          cartesian.yScale().maximum(105.0).minimum(93.0);
                    cartesian.yScale().ticks().interval(3);


                    cartesian.rangeMarker(0).from(96.0d).to(98.8d);

                    cartesian.rangeMarker(1).from(98.8d).to(100.4d);

                    cartesian.rangeMarker(2).from(100.4d).to(105.0d);

                    series1.stroke("#000000");



        List<DataEntry> seriesData = new ArrayList<>();
        Set set = Set.instantiate();
        Mapping series1Mapping = set.mapAs("{ x: 'x', value: 'value' }");

        Line series1 = cartesian.line(series1Mapping);


        series1.markers(true);

        series1.name("Temp");
        series1.hovered().markers().enabled(true);
        series1.hovered().markers()
                .type(MarkerType.CIRCLE)
                .size(4d);
        series1.tooltip()
                .position("right")
                .anchor(Anchor.LEFT_CENTER)
                .offsetX(5d)
                .offsetY(5d);



        Scanner inputStream;

        inputStream = new Scanner(file);

        while(inputStream.hasNext()){
            String line= inputStream.next();

            if (line.equals("")) { continue; } // <--- notice this line

            String[] values = line.split(",");
            String V = values[0];  // Date
            String W= values[1];   // Time (12 hours format)
            String X= values[2];   // Temperature
            String Z= values[4];   // Mode

            String display = X;

            if(!TextUtils.isEmpty(display)) {
                display  = display.substring(0, display.length()-2);

                X = display;
            }

            float T = Parsefloat(X); // converts string temperature to float value

        
                  


                    seriesData.add(new CustomDataEntry(V + "\\n" + W, T));

   

           }

        inputStream.close();
        set.data(seriesData);
        anyChartView.setChart(cartesian);
}

[Shestac92]

@vigneshtg Do you need strictly horizontal ranges or rotate them a bit as on the first screenshot?

[vigneshtg]

@Shestac92 I need only horizontal ranges without rotation and to fill 3 ranges in my chart (second Screenshot) by taking only the colors in first screenshot. Further, I've mentioned my 3 ranges above which I mention here also:

96 - 98.8 - 1st region (Range 1) 98.8 - 100.4 - 2nd region (Range 2) 100.4 - 105 - 3rd region (Range 3)

Also three colors regions, I'm mentioning in the image (a part of first screenshot) as follows:

[Shestac92]

@vigneshtg Ok, then to achieve that you need apply the color using .fill() function. Like below:

                    cartesian.rangeMarker(0).from(96.0d).to(98.8d).fill("red");
                    cartesian.rangeMarker(1).from(98.8d).to(100.4d).fill("green");
                    cartesian.rangeMarker(2).from(100.4d).to(105.0d).fill("pink");

[vigneshtg]

@Shestac92 Earlier, I've applied like you mentioned, but it looks like each region is filled with single color which is shown in below image:

But I need, mix of two colors in each region, for instance if you see reference image (Fever Chart image), where if you take 1st region first half of region is filled with green and near end of 1st region, it has yellow shades.

Here's a reference documentation of Anychart link where, you can see Linear Gradient case and as the code is in JavaScript how do I setup in Android? https://docs.anychart.com/Graphics/Fill_Settings

[Shestac92]

@vigneshtg Unfortunately, it's not possible in the current version of the library, the vertical gradient is not implemented in it. We will take it into account for future updates.